获取已单击元素的ID名称，并显示具有相同类名的div。

Question

我的目标是获取单击导航按钮的ID名称(例如，位于#cat-1列表中的li元素的ul.accordion-content ID )，并显示具有类.cat-1名称相同的.gallery-item块。它不起作用，我也找不出原因。

​

$("ul.accordion-content > li").on("click", function() {
  var category = $(this).id;

  if ($(".gallery-item").hasClass(category)) {
    $(".gallery-item").show();
  } else {
    $(".gallery-item").hide();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion-content">
  <li id="cat-1">Category One</li>
  <li id="cat-2">Category Two</li>
  <li id="cat-3">Category Three</li>
</ul>

<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>
<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>

<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>
<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>

<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>
<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>

​

当我单击其中一个导航按钮时，它们都会消失。

Answer 1

主要问题是id不是jQuery对象的属性，因此category被设置为undefined。要解决这个问题，您需要使用$(this).prop('id')或this.id。

还请注意，您可以通过选择类直接选择元素，而不是使用hasClass()，从而使逻辑更加简洁--这只适用于集合中的第一个元素。试试这个：

​

$("ul.accordion-content > li").on("click", function() {
  $('.gallery-item').hide().filter('.' + this.id).show()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion-content">
  <li id="cat-1">Category One</li>
  <li id="cat-2">Category Two</li>
  <li id="cat-3">Category Three</li>
</ul>

<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>
<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>

<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>
<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>

<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>
<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>

​

Answer 2

尝尝这个。从当前单击项中获取id，即this通过this.id，然后将逻辑放在那里，隐藏所有.gallery-item，然后只使用.this.id类显示。

​

$('.accordion-content li').on('click', function(){
  $('.gallery-item').hide();
  $(`.${this.id}`).show();
});

div.gallery-item{
  display: none
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion-content">
  <li id="cat-1">Category One</li>
  <li id="cat-2">Category Two</li>
  <li id="cat-3">Category Three</li>
</ul>

<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>
<div class="gallery-item cat-1">
  <div class="item-content">Item One</div>
</div>

<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>
<div class="gallery-item cat-2">
  <div class="item-content">Item Two</div>
</div>

<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>
<div class="gallery-item cat-3">
  <div class="item-content">Item Three</div>
</div>

​