在jQuery中編碼水龍頭

Question

我是jquery新手，選擇其中的元素時遇到問題。 在此代碼中，我想顯示和隱藏與我單擊的li具有相同類的“內容” div。 它應該像水龍頭一樣工作。 所以我寫了這段代碼，但是沒有用。

 $('.menu li').click( function() { var x = this.attr("class"); $('.contents').children().hasClass(x).show(); $('.contents').children().not(hasClass(x)).hide(); } ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu "> <ul> <li class="one"></li> <li class="two"></li> <li class="three"></li> </ul> </div> <div class="contents"> <div class="one" style="background-color:red"></div> <div class="two" style="display: none; background-color:yellow"></div> <div class="three" style="display: none; background-color:orange"></div> </div> 

我實際上不確定這種方法是否是正確的方法！

Answer 1

類屬性的問題在於它們可以按任何特定順序保存多個任意值。 因此，它們不適合完全匹配定位。

相反，我將為您的<div>元素提供id屬性，並在<li>元素上使用另一個屬性來定位這些ID。 例如

<li class="one" data-target="one">

和

<div class="one" id="one">

並在您的jQuery中

$('.menu li[data-target]').on('click', function() {
  var targetId = this.getAttribute('data-target')
  $('.contents div').each(function() {
    $(this).toggle(this.id === targetId)
  })
})

參見http://api.jquery.com/toggle/#toggle-display