如何添加和從數組中刪除？

Question

我有一系列的圖像，我想插入他們的src values，然後添加一些div elements與array關聯到陣列中點擊圖像並刪除它們，如果我們再次點擊。

嘗試以下，但我得到了邏輯錯誤，因爲它是不刪除已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()從陣列中刪除網址和indexOf()獲取該網址的索引。

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>

Answer 2

這是字節的矯枉過正。使用簡單的indexOf檢查圖像是否已在urls中。我看不到img標籤上checked是如何語義的，也許切換到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>

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>