jQuery：獲取類名稱和操縱字符串

我有以下一組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();});

要做到這一點，但似乎並沒有非常有效的，如果我不得不做多個項目。

來源

2011-03-11 st4ck0v3rfl0w

這將與<div>秒的任意數量的工作：

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

來源

2011-03-11 06:32:32

啊，是的，這是有道理的......將在8分鐘接受。謝謝保羅！ – st4ck0v3rfl0w 2011-03-11 06:33:30

保羅，任何想法，爲什麼這將不顯示面板，直到第二次點擊？有問題在這裏:( – st4ck0v3rfl0w 2011-03-11 07:25:51

請鏈接到問題的頁面。 – 2011-03-11 14:19:30

您可以用前綴選擇器隱藏所有這些選項，然後只顯示所需的名稱。這會讓你的代碼更簡單和更短。

像這樣的東西，原諒任何錯誤，我沒有測試這個，我不能流利的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 . 
    } 
    );

來源

2011-03-11 06:28:58 DhruvPathak

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

來源

2011-03-11 06:33:04

jQuery：獲取類名稱和操縱字符串

回答

相關問題