javascript - 如何在数组中添加和删除？

Question

我有一系列图像，我想插入它们的 src 值，然后将一些与其关联的 div 元素 添加到数组中> 单击图像进入数组，如果再次单击则将其删除。

尝试以下操作，但我的逻辑错误，因为它没有删除已经的el:

HTML

<div class="card">
  <img src="test_2.jpg">
</div>
<div class="card">
  <img src="test_2.jpg">
</div>
<div class="card">
  <img src="test_3.jpg">
</div>

JS

$('body').on('click', '.card img', function () {
      var urls = [];
      if($(this).hasClass("checked")) {
        $(this).removeClass("checked");
        var urlInArray = $(this).attr('src');
        urls.splice($.inArray(urlInArray, urls), 1);
        console.log(urls);
      } else {
        $(this).addClass("checked");
        var checkedItems = $('.checked'); // get the checked items
        checkedItems.each(function () {
          urls.push($(this).attr('src'));
        });
        var str = '';
        urls.forEach(function (url) {
          str += '<div class="card"><img class="img-fluid" onerror="this.parentNode.removeChild(this);" src="' + url + '"></div>';
        });
        console.log(urls);
      }
    });

Answer 1

您可以使用 splice() 从数组中删除 url，并使用 indexOf() 获取该 url 的索引。

var urls = [];

$(".card img").click(function() {
  var src = $(this).attr('src')
  $(this).hasClass('checked') ? urls.splice(urls.indexOf(src), 1) : urls.push(src);
  $(this).toggleClass('checked')

  console.log(urls)
})

.checked {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <img src="test_1.jpg">
</div>
<div class="card">
  <img src="test_2.jpg">
</div>
<div class="card">
  <img src="test_3.jpg">
</div>