[英]How to count clicks on sibling elements and change CSS when all siblings have been clicked?
我的代碼是:
<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]);
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.