在每个循环中选择div

Question

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

前四次点击有四种不同的内容。首先点击 - 内容1;第二次点击 - 内容2，等等。

问题是，最后填充的内容也填充每隔一个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++; 
    }); 
}); 
    }); 

Answer 1

问题是，你是用靶向类.back所有元素，与你的选择：

$('.back').html 

例如：使用：$(this).next().html...。

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