jquery 中的编码水龙头

coding taps in jquery

我是 jquery 的新手,我在选择其中的元素时遇到问题。 在此代码中,我想显示和隐藏 "contents" div,它们与我点击的 li 具有相同的 class。它应该像水龙头一样工作。 所以我写了这段代码,但它不起作用。

$('.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>

我什至不确定这种方法是否是正确的方法!

class 属性的问题在于它们可以以任何特定顺序保存多个任意值。这使得它们不适合精确匹配定位。

我会为您的 <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