在每个循环中选择div

时间:2017-01-04 14:45:34

标签: javascript html

我在这段代码中遇到了一些问题。 我的目标是单击一个随机div,然后用内容填充其中的div。

前四次点击有四种不同的内容。首先点击 - 内容1;第二次点击 - 内容2,依此类推。

问题是最后填充的内容还会填充所有其他div,而不仅仅是所选的div。

这是我的小提琴:https://jsfiddle.net/xamonix/g0go9sgh/

这是我的代码:

 $(document).ready(function() {
 var clickCount = 0;
 $('.covers .col-md-4').each(function() {
     $('.front', this).click(function() {
         clickCount = (clickCount == 5) ? 0 : clickCount;
         if (clickCount == 0) {
             $('.back').html("<div class='back_content_1'>CONTENT 1</div>");
             $(this).closest('#flip-toggle').addClass('flip');
         } else if (clickCount == 1) {
             $('.back').html("<div class='back_content_1'>CONTENT 2</div>");
             $(this).closest('#flip-toggle').addClass('flip');

         } else if (clickCount == 2) {
             $('.back').html("<div class='back_content_1'>CONTENT 3</div>");
             $(this).closest('#flip-toggle').addClass('flip');
         } else if (clickCount == 3) {
             $('.back').html("<div class='back_content_1'>CONTENT 4</div>");
             $(this).closest('#flip-toggle').addClass('flip');
         } else if (clickCount == 4) {
             return false;
         }
         clickCount++;
     });
 });
  });

1 个答案:

答案 0 :(得分:1)

问题是你用你的选择器

来使用类.back来定位所有元素
  $('.back').html

例如,使用:$(this).next().html...

更新了小提琴:https://jsfiddle.net/g0go9sgh/9/