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

$("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(); 
});

jQuery：获取类名和操纵字符串

3 个答案: