Question

检查以下代码。 Html显示三个包含特殊attr的图像 - data-cc。并且所有这3个图像data-cc attr值存储在名为coll的数组上。我想要的是点击任何一个data-cc值将从名为coll的数组中删除的图像。现在我已经能够从数组集合中删除一个特定的值，但问题是我在返回value != 1;时硬编码就像这样。如何根据单击的图像删除值？

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

Answer 1

在制作this功能之前，您需要存储grep。

此外，您需要在点击处理程序中定位"#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>

Answer 2

您可以使用indexOf获取数组中已点击的img数据属性的索引，如果它存在于数组中，请使用splice将其删除。

const coll = $('[data-cc]').map(function() {
  return $(this).attr('data-cc')
}).get()


$("#fl img").on("click", function () {
  const i = coll.indexOf($(this).attr('data-cc'))
  if(i != -1) coll.splice(i, 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 3

保持所有图像的类名相同，然后尝试下面的代码

<script>
$(document).ready(function() {
  var coll = [];
  $('[data-cc]').each(function() {
    coll.push($(this).attr('data-cc'));
  });
  $(".zastavica").on("click", function() {
    var v = $(this).attr('data-cc');
    coll = jQuery.grep(coll, function(value) {
      return value !== v;
    });
    console.log(coll);
  });
});
</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>

在点击时获取特殊属性值

3 个答案: