Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    hide all elements except current value in case statement using jquery

    Hey all,

    So I thought I was making significant progress refactoring some javascript tabs I initially created in pure javascript, but now resorted to jQuery. While I can get it to correctly display the right div container using $(displayDiv).show(); in the below code. The problem is I try to use the .empty() method to empty the outer content container so I can then display ONLY the specific div. However empty() empties the outer container and then fails to show the specific div I specify:


    Code:
    $(document).ready(function()
    {
    	
    	var linksToInt = { 
    		"#pple": 0,
    		"#serv": 1,
    		"#sol": 2
    	}
    	
    	/*
    	links = document.getElementsByTagName("a");
    	if(links.className.indexOf("div-link") > -1){
    		links.onclick = function{ removeHash(this.getAttribute("href"));};
    	}
    	*/
    	
    	
    	$("a.div-link").click(function(){displayDiv($(this).attr("href"));});
    	
    	function displayDiv(id){
    	var linkInt = linksToInt[id];
    	on_btn_click(linkInt);
    	}
    	
    	function on_btn_click(displayDiv){
    		displayDiv != null ? null : this;
    		
    		switch(displayDiv){
    			case 0:
    				$("#content").empty();
    				$(displayDiv).show();
    				break;
    			case 1:
    				$("#content").empty();
    				$(displayDiv).show();
    				break;
    			case 2:	
    				$("#content").empty();
    				$(displayDiv).show();
    				break;
    			case 3:
    				$("#content").empty();
    				$(displayDiv).show();
    				break;
    		}
    	}
    
    });
    Code:
    <div id="content">
    	<div class="tabContent" id="pple">
    		<p>
    			Some Content.
    		</p>	
    	</div>
    
    	<div class="tabContent" id="serv">
    		<p>
    			Some Content
    		</p>	
    
    	</div>
    
    	<div class="tabContent" id="sol">	
    		<p>
    			Some Content
    		</p>	
    	</div>			
    </div>
    Any suggestions? thanks.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Anyone know why this is telling me there is a syntax error:
    Code:
    		switch(displayDiv){
    			case 0:
    				function(){$("#content > div").hide(); $(displayDiv).show();};	
    				break;
    			case 1:
    				function(){$("#content > div").hide(); $(displayDiv).show();};	
    				break;
    			case 2:	
    				function(){$("#content > div").hide(); $(displayDiv).show();};	
    				break;
    			case 3:
    				function(){$("#content > div").hide(); $(displayDiv).show();};	
    				break;
    		}

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    what’s the error message?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    This is all that firebug tells me:

    syntax error
    [Break on this error] function(){$("#content > div").hide(); $(displayDiv).show();}; \n


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •