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
}

使用jQuery删除/添加基于计数的图像

2 个答案: