Question

我有一系列图片，我想插入他们的src values，然后在点击图片时将div elements过多的array添加到数组el中如果我们再次点击，请删除它们。

尝试以下操作，但由于没有删除已经<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>，我的逻辑错误：

HTML

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

JS

a_1 = 10
a_2 = 15
a_3 = 4
a_4 = 25

x = 3

a_(x) = 4

Answer 1

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

＆＃13;

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

＆＃13;

.checked {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 2

这是一个过度的字节。使用简单urls检查图片是否已在checked中。我看不到img标记上的data-checked是如何语义的，也许会切换到var urls = []; $('body').on('click', '.card img', function () { // src; unique var src = $(this).attr('src'), // index of src key index = urls.indexOf(src); // if element exists; if(index >= 0){ // remove urls.splice(index, 1); } else { // add to urls urls.push(src); } console.log(urls); });？

div {
   display:inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="card">
  <img src="https://source.unsplash.com/uK9QFr3fFk0/100x100">
</div>
<div class="card">
  <img src="https://source.unsplash.com/pHANr-CpbYM/100x100">
</div>
<div class="card">
  <img src="https://source.unsplash.com/39-0VXkvcbw/100x100">
</div>

temp

Answer 3

应该很简单。 check this

$(document).ready(function () {
    var status = {};
    $('body').on('click', '.card img', function () {
        var src = $(this).attr('src');
        if (typeof status[src] == 'undefined' || status[src] == false) {
            status[src] = true;
            $(this).next().html('added');
        } else {
            status[src] = false;
            $(this).next().html('removed');
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="card">
  <img src="france_fan.jpg" alt='image_1'>
  <span>removed</span>
  </div>
  <div class="card">
   <img src="italy-s.gif" alt='image2'>
   <span>removed</span>
  </div>
  <div class="card">
  <img src="bangladesh-s.gif" alt='image3'>
 <span>removed</span>
  </div>

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

3 个答案: