jquery - 单击时获取特殊属性值

Question

检查下面的代码。 Html 显示三个图像，其中包含一个名为 - data-cc 的特殊属性。所有这 3 个图像的 data-cc attr 值都存储在名为 - coll 的数组中。我想要的是，当单击任何这些图像时，data-cc 值将从名为 coll 的数组中删除。现在我已经能够从数组集合中删除特定值，但问题是我像这样对 return value != 1; 进行了硬编码。如何根据点击的图像删除值？

$(document).ready(function() {
  var coll = [];
  $('[data-cc]').each(function() {
    coll.push($(this).attr('data-cc'));
  });
  $("#fl").on("click", function() {
    coll = jQuery.grep(coll, function(value) {
      return value != 1;
    });
    console.log(coll);
  });
});

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

Answer 1

在创建 grep 函数之前，您需要存储 this。

此外，您需要在点击处理程序中定位 "#fl img"，而不是 "#fl":

$("#fl img").on("click", function () {
    var that = this;
    coll = jQuery.grep(coll, function(value) {
        return value != $(that).attr('data-cc');
    });
    console.log(coll);
    });
});

$(document).ready(function() {
  var coll = [];
  $('[data-cc]').each(function() {
    coll.push($(this).attr('data-cc'));
  });
  $("#fl img").on("click", function () {
    var that = this;
    coll = jQuery.grep(coll, function(value) {
        return value != $(that).attr('data-cc');
    });
    console.log(coll);
  });
});

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