各ループでdivを選択

Question

私はこのコードのいくつかの問題に直面しています。 私の目標はランダムなdivをクリックして、その中のdivを内容で埋めることです。

最初の4回のクリックには4つの異なる内容があります。最初のクリック - コンテンツ1; 2番目のクリック - コンテンツ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/