如何在 jQuery 中隐藏循环元素

Question

我有一个动态列表，其中类由 PHP 循环生成。我想知道如何检测添加的类，因为未来的类名可能会在不久的将来通过 CMS 添加。目前，我正在手动完成并希望它能够自动化

例如

<ul id="Portfoliolist">
<li class="2020">Name</li>
<li class="2019">Name</li>
<li class="2018">Name</li>
<li class="2017">Name</li>
<li class="2016">Name</li>   
</ul>

jQuery 手册

$('.2020').click(function() {
$('.portfolio_image 2019').css('display','none');
});

$('.2019').click(function() {
    $('.portfolio_image 2020').css('display','none');
});

在不久的将来，可能会在后端添加一个类似 2021 的类名，并将导致

<ul id="Portfoliolist">
<li class="2021">Name</li> <!-- added through loop -->
<li class="2020">Name</li>
<li class="2018">Name</li>
<li class="2017">Name</li>
<li class="2016">Name</li> 
</ul>

并且由于 jQuery 代码中不存在 2021 年的新类，该脚本将无法运行

$('.2019').click(function() {
$('.portfolio_image 2020').css('display','none');
$('.portfolio_image 2019').css('display','block');
});
 
$('.2020').click(function() {
$('.portfolio_image 2019').css('display','none');
$('.portfolio_image 2020').css('display','block');
});


<div class="portfolio_image 2019"> ...list of portfolio  </div>
<div class="portfolio_image 2018"> ...list of portfolio   </div>

Answer 1

改写如下，

最初用 css 隐藏除第一个项目之外的所有项目。

然后，不要使用li 的类，而是使用data-* 属性，因为它很容易上手，与样式和jquery 分开.attr('class') 如果您添加一个用于样式的类，则需要进行一些解析。

然后简单地将它们全部隐藏，并使用与类名匹配的 data-id 仅显示您想要的特定投资组合图像，（显然，如果您有多个相同的，它将全部显示）

$(function() {
  $('#Portfoliolist li').click(function() {
    $('.portfolio_image').hide()
    $('.portfolio_image.' + $(this).data('id')).show()
  })
})

.portfolio_image:not(:first-of-type) {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="Portfoliolist">
  <li data-id="2021">Name</li>
  <!-- ...added through loop -->
  <li data-id="2022">Name</li>
  <li data-id="2023">Name</li>
  <li data-id="2024">Name</li>
  <li data-id="2025">Name</li>
</ul>

<div class="portfolio_image 2021"> ...list of portfolio 2021</div>
<div class="portfolio_image 2022"> ...list of portfolio 2022</div>
<div class="portfolio_image 2023"> ...list of portfolio 2023</div>
<div class="portfolio_image 2024"> ...list of portfolio 2024</div>
<div class="portfolio_image 2025"> ...list of portfolio 2025</div>

那么你不会破坏 DRY 和/或为 db 中的每个项目制作 js 代码。