Question

我的目标是获取点击的导航按钮的ID名称（例如self.collectionView.insertItems(at: paths) self.viewController.collectionView.numberOfItems(inSection: 0)元素的viewController.appendNewData(["a","b","c","d"]) ID，并显示#cat-1个阻止它们具有类li的相同名称。它不起作用，我无法弄清楚原因。

ul.accordion-content

.gallery-item

点击其中一个导航按钮后，它们全部消失。:(

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个。从当前点击的项目获取id，this通过this.id，然后将您的逻辑放在那里，隐藏所有.gallery-item，然后只显示.this.id类

＆＃13;

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

＆＃13;

div.gallery-item{
  display: none
 }

＆＃13;

<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>

＆＃13;

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

2 个答案: