Question

我是jquery的新手，我在选择其中的元素时遇到了问题。在这段代码中，我想显示和隐藏“内容”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

jquery

1 个答案: