アレイの追加と削除の方法は？

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()を使用することができます配列から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>

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>