jquery - 使用 jQuery 基于计数器删除/添加 img

Question

基本上，我想要做的是当单击列表项时，将图像附加到图像 div 中，当它被关闭时，从图像 div 中删除最后一个图像。因此，添加的列表项越多，div 中的图像就越多。当列表项全部关闭时，图像数量应重置为正常。

HTML

<ul id="list">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

<div class="images">
  <img src="#" />
  <img src="#" />
  <img src="#" />
  <img src="#" />
  <img src="#" />
</div>

jQuery

var count = 0;
$('#list a').on("click", function(event){
    count++;
    $(this).parent().toggleClass('added');
    var classname = $(this).parent().toggleClass('added');

    if (classname == '') {
      // remove image
    } else {
      //add image
    }

}

有任何想法吗？

Answer 1

为什么不直接遍历图像列表以查看源是否存在并将类排除在外？可能是这样的？：

$('#list a').on("click", function(event){

    var src = $(this).attr('href'); // source of link clicked

    var addMe = 1;

    // loop through images list and look for clicked source
    $('.images img').each(function(i) {
        var $img = $(this);

        if ($img.attr('src') = src) { // found source matching <a href>
            $img.remove(); // remove the image
            addMe = 0; // stop image from adding
        } 
    });

    // if addme still = 1 append the html
    if (addMe) {
        var html = '<img src="'+src+'" />';
        $('.images').append(html);
    }

});

Answer 2

您可以检查一个元素是否应用了一个类，例如：

if (!$(this).parent().hasClass('added')) {
  // remove image
} else {
  //add image
}