点击图片动态移除对应data-cc值从coll数组的实现方法

我来帮你搞定这个需求～你现在的代码里点击事件绑在了父元素<p id="fl">上，而且过滤条件硬编码成了1，所以没法动态处理不同图片的点击。咱们可以这样修改：

核心改动点 #

• 把点击事件直接绑定到每张图片上，这样能精准获取当前点击图片的data-cc值
• 在点击回调里拿到这个动态值，替换掉硬编码的过滤条件

修改后的完整代码 #

JavaScript 部分

$(document).ready(function() {
  var coll = [];
  // 初始化数组，收集所有图片的data-cc值
  $('[data-cc]').each(function() {
    coll.push($(this).attr('data-cc'));
  });
  
  // 给每张带有data-cc属性的图片绑定点击事件
  $('[data-cc]').on("click", function() {
    // 获取当前点击图片的data-cc值
    var targetValue = $(this).attr('data-cc');
    // 过滤数组，移除对应的值
    coll = jQuery.grep(coll, function(value) {
      return value !== targetValue;
    });
    console.log(coll); // 查看移除后的数组
  });
});

HTML 部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="fl">
  <img src="https://i.imgur.com/OHxsoJf.png" data-cc="1" class="zastavica" />
  <img src="https://i.imgur.com/OHxsoJf.png" data-cc="2" class="zastavica" />
  <img src="https://i.imgur.com/OHxsoJf.png" data-cc="3" class="zastavica" />
</p>

额外说明 #

• 如果你想用更简洁的方式获取data-cc值，可以用$(this).data('cc')，它会自动把属性值转换成对应的数据类型（比如这里的数字），不过用attr('data-cc')保持字符串类型也完全没问题，只要过滤时的判断逻辑一致就行。
• 点击任意一张图片后，控制台都会输出移除对应值后的数组，你可以验证效果是否符合预期。

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