如何在 jQuery 中隐藏循环元素

Posted 2023-05-09

【中文标题】如何在 jQuery 中隐藏循环元素

【英文标题】：How to Hide Loop Element in jQuery

【发布时间】：2020-11-29 14:20:27

【问题描述】：

我有一个动态列表，其中类由 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>

【问题讨论】：

不要为相似元素创建唯一类，对唯一值使用通用类和数据属性。

什么是portfolio_image？它是被所有li 元素点击隐藏的相同元素吗？相关的 html 会有帮助吗？

portfolio 是点击列表类时隐藏的图片

【参考方案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 代码。

【讨论】：

我已经更新了代码。唯一的类是隐藏和显示具有数字类的投资组合图像的触发器，因此如果他们单击#Portfoliolist 2019，将显示所有具有 2019 的投资组合图像