我在这段代码中遇到了一些问题。 我的目标是单击一个随机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++;
});
});
});
答案 0 :(得分:1)
问题是你用你的选择器
来使用类.back来定位所有元素 $('.back').html
例如,使用:$(this).next().html...
。