我的代码是:
<div class='container'>
<label>Label 1</label>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<label>Label 2 </label>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
如果用户点击容器内的 div,我将像这样添加类“clicked”
$(".container>div").click(function(){
$(this).addClass("clicked");
});
我想知道每个标签旁边有多少个 div 被点击,当所有 div 都被点击后,我想向该标签添加一个 CSS 类
例如,当访问者点击标签 1 旁边的所有 5 个 div 更改其类别时,
标签 2 旁边的 4 个 div 也是如此
最佳答案
$(function() {
var counter = {};
$(".container>label").each(function(idx) {
var labelItem = "label"+idx;
counter[labelItem]={max:$(this).nextUntil("label").size(), cnt:0, idx:idx};
$(this).nextUntil("label").on("click",function() {
if (this.className!="clicked") {
$(this).addClass("clicked");
counter[labelItem].cnt++;
if (counter[labelItem].cnt >= counter[labelItem].max) {
$(this).parent().find('label').eq(idx).addClass("full").append(" full");
}
$(this).append(" - clicked and added to "+labelItem+": "+counter[labelItem]);
}
});
});
});
关于javascript - 如何计算兄弟元素的点击次数并在所有兄弟元素都被点击后更改 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10168611/