JQuery: получить имя класса и манипулировать строкой

Question

Пытаясь решить эту проблему:

У меня есть следующий набор div, которые при нажатии показывают конкретную панель. Я могу сделать это путем жесткого кодирования значений, но мне было интересно, как это сделать наиболее эффективным способом.

<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>

Как отмечалось выше, я знаю, как это сделать

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

Но это не очень эффективно, если я должен сделать это для нескольких предметов.

Answer 1

Это будет работать с произвольным числом <div> с:

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

Answer 2

Вы можете скрыть их все с помощью селектора префиксов, а затем отобразить только нужный.это сделало бы ваш код проще и короче.

Как-то так, простите за любые ошибки, я не проверял это, и я не бегло говорю в 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 .
     }
    );

Answer 3

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