jQuery实现多列表项独立控制对应div显示隐藏的优化方案

你当前代码的问题在于使用了全局类选择器做操作，触发事件时会命中页面上所有匹配类名的元素，所以点击任意按钮所有列表对应的展示区域都会同步变化。只要基于当前点击的元素做相对范围查找，就能实现单条列表独立控制的效果，不需要给每个元素单独设置类名，哪怕30条甚至更多列表都能通用。

修改后的JS代码 #

$('.list-link').click(function() {
  // 定位当前点击按钮所属的列表项
  const currentItem = $(this).closest('.list-entry');
  // 仅切换当前列表项内的按钮状态
  currentItem.find('.list-link').hide();
  currentItem.find('.Hide').show();
  // 仅操作当前列表项对应的展示div
  currentItem.next('.test-div').show(500);
});

$('.Hide').click(function() {
  const currentItem = $(this).closest('.list-entry');
  currentItem.find('.list-link').show();
  currentItem.find('.Hide').hide();
  currentItem.next('.test-div').hide(500);
});

补充说明 #

1. 你的原有HTML存在小问题：第一个<li class="list-entry">内的<div class="links">缺少闭合标签，建议补充避免浏览器渲染异常。
2. 要实现PNG预览功能，直接在对应的.test-div内插入<img>标签，将src属性设置为对应PNG文件的地址即可。
3. 下载功能只需给a.download-link标签的href属性赋值为对应文件地址，加上download属性即可触发浏览器的下载行为。

内容的提问来源于stack exchange，提问作者adam