0

基本的に、私がやりたいことは、リスト項目がクリックされたとき、画像が画像 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
    }

}

何か案は？

4

2 に答える 2

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

});
于 2012-06-18T16:55:46.220 に答える
0

次のように、要素にクラスが適用されているかどうかを確認できます。

if (!$(this).parent().hasClass('added')) {
  // remove image
} else {
  //add image
}
于 2012-06-18T16:51:46.073 に答える