Question

如果我运行以下内容：

urls = [];
console.log(urls);
$('body').on('click', '#loadImages .card span', function () {
 var src = $(this).parent().find("img").attr('src');
 $(this).hasClass('checked') ? urls.splice(urls.indexOf(src), 1) : urls.push('<div class="card"><img class="img-fluid" onerror="this.parentNode.removeChild(this);" src="' + src+ '"></div>');
 $(this).toggleClass('checked');
 console.log(urls);
});

在控制台中我得到：

["<div class="card"><img class="img-fluid" onerror="…ns/7/73/Xinhai_Revolution_in_Shanghai.jpg"></div>"]

[]

阵列是如何清空的？

我基本上是尝试将图像添加到数组

Answer 1

$(this).hasClass('checked')

如果评估为true，则仅urls元素被拼接。别无他法。

Answer 2

通过更改此行

，您可以更轻松地单步执行代码

自：

$(this).hasClass('checked') ? urls.splice(urls.indexOf(src), 1) : urls.push('<div class="card"><img class="img-fluid" onerror="this.parentNode.removeChild(this);" src="' + src+ '"></div>');`

到：

// if the clicked item has the class "checked"
if( $(this).hasClass('checked') ){

  console.log("removing url from array")

  // determine if the url is already in the array of urls
  var urlIndex = urls.indexOf(src)

  // -1 means it was not found (0 would be first in array)
  if( urlIndex > -1 ){
    console.log("url exists, remove it from array"
    urls.splice(urlIndex, 1)
  }
}else{
   console.log("adding url to array")
   urls.push('<div class="card"><img class="img-fluid" onerror="this.parentNode.removeChild(this);" src="' + src+ '"></div>');
}

然而...

网址将永远不会从数组中移除，因为您正在寻找文字src .attr('src')，但您要存储自定义的html字符串<div class...

Answer 3

$(this).hasClass('checked')

如果这是真的，你会从数组中删除1个元素，如果它存在与否则无关紧要，因为

urls.splice(urls.indexOf(src), 1)

即使

，

也会删除元素

urls.indexOf(src)

返回-1

如果您想解决此问题，可以查看

if(urls.indexOf(src) != -1){
    urls.splice(urls.indexOf(src), 1)
}

添加从数组中删除导致空数组？

3 个答案:

自：

到：

然而...