jQuery: Get Class Name and Manipulate String

Question

Trying to solve this problem:

I have the following set of divs that when clicked show a particular panel. I can do this by hard coding the values, but was wondering how to go about this in the most efficient way.

<div id="myContainer">
<div id="myMenu_1" class="myMenu">Menu1</div>
<div id="myMenu_2" class="myMenu">Menu2</div>
<div id="myMenu_3" class="myMenu">Menu3</div>
</div>

<div id="myPanel_1" class="myPanel">If Menu1 is clicked show this panel</div>
<div id="myPanel_2" class="myPanel">If Menu2 is clicked show this panel</div>
<div id="myPanel_3" class="myPanel">If Menu3 is clicked show this panel</div>

As noted above, I know how to do this by

$('myMenu_1').click(function(){$('myPanel_3').hide();$('myPanel_2').hide();$('myPanel_1').show();});

But this doesn't seem very efficient if I have to do it for multiple items.

Paul Schreiber · Accepted Answer · 2011-03-11 06:32:32Z

3

This will work with an arbitrary number of <div>s:

$("div.myMenu").click(function() {
  $("div.myPanel").hide();
  var index = $(this).attr("id").split("_")[1];
  $("div#myPanel_" + index).show();
});

answered Mar 11, 2011 at 6:32

Paul Schreiber

12.6k4 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

st4ck0v3rfl0w Over a year ago

ah yes, that makes sense... will accept in 8 min. thanks paul!

st4ck0v3rfl0w Over a year ago

Paul, any idea why this wouldn't show the panel until the second click? Having issues here :(

Paul Schreiber Over a year ago

Please link to the page with the problem.

DhruvPathak · Accepted Answer · 2011-03-11 06:42:23Z

1

You can hide all of them with prefix selector, and then show only the required one. that would make your code simpler and shorter.

Something like this, forgive any errors, I did not test this, and I am not fluent in jQuery.

   $('[id$=foo]')
    $('[^id=myMenu').click(
    function(){ $([^id=myPanel).hide(); // hide all panels 
                 var toShowId = $(this).attr('id').replace("myMenu","myPanel");
                 $('#'+toShowId).show(); // show corresponding panel .
     }
    );

edited Mar 11, 2011 at 6:42

answered Mar 11, 2011 at 6:28

DhruvPathak

43.4k17 gold badges125 silver badges180 bronze badges

Comments

Corey Sunwold · Accepted Answer · 2011-03-11 06:33:04Z

0

$('myMenu_1').click(function() { 
    $("div[id^='myPanel_']").hide(); 
});

answered Mar 11, 2011 at 6:33

Corey Sunwold

10.3k6 gold badges53 silver badges55 bronze badges

Collectives™ on Stack Overflow

jQuery: Get Class Name and Manipulate String

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related