How do I See if All of My Divs Have Class?
Question
The JSFiddle is here http://jsfiddle.net/jaredasch1/eayc4mj3/
I'm working on a game in JSFiddle, and I've come across a bit of a problem. Once all the boxes have the class ".on", I want to reset them all back to not having the class ".on" and perform a new action. However, I can't seem to find a way to do this. I've looked on here for answers but all the answers don't seem to work.
Here is the body of my HTML
<body>
<div id="button" class="on hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</body>
Here is my CSS
.block {
height:100px;
width:100px;
border-radius:10px;
display:inline-block;
background-color:#33CCFF;
}
#button {
height:100px;
width:410px;
border-radius:10px;
display:inline-block;
background-color:#FF6666;
margin-bottom:10px;
}
.on {
background-color:#D633FF;
}
Finally, here is my JQuery/JavaScript
var main = function () {
$(".hover").mouseenter(function () {
$(this).fadeTo("slow", 0.25);
$(this).css('cursor', 'pointer');
});
$(".hover").mouseleave(function () {
$(this).fadeTo("slow", 1);
$(this).css('cursor', 'default');
});
$(".block").click(function () {
$(this).toggleClass("on");
$(this).prev().toggleClass("on");
$(this).nextAll().eq(4).toggleClass("on");
$(this).next().toggleClass("on");
$(this).prevAll().eq(4).toggleClass("on");
});
$("#button").click(function () {
$(".block").removeClass("on");
});
$(document).keydown(function (key) {
if (event.which === 32) {
$(".block").removeClass("on");
}
});
};
$(document).ready(main);
If anyone has any answers, please reply and I will gladly try them with an open mind. Thanks!
3 answers
solution1
4 2014-09-17 21:18:45
You can fetch all divs with jQuery, then fetch all divs with the on class on another call. You'll get two objects. Just compare their lengths ;)
var allDivs = $("div");
var classedDivs = $("div.on");
var allDivsHaveClass = (allDivs.length === classedDivs.length);
Then...
if (allDivsHaveClass) {
allDivs.removeClass("on");
}
This will remove only the on class. If you would like to remove other classes as well, you may clear the class attribute of your div's, like this:
allDivs.attr("class", "");
solution2
1 2014-09-17 21:24:38
Another way would be to use the each() function:
var allDone = 'yes';
$("div.block").each(function (i) {
if (!$(this).hasClass("on")) allDone = 'no';
});
if (allDone === 'yes') $("div.block").removeClass("on");
But first you need an event to trigger this check. Suppose you want to check every 20 seconds to check if it is true that all div elements of class .block also have the class .on...
function checkOnClass() {
var allDone = 'yes';
$("div").each(function (i) {
if (!$(this).hasClass("on")) allDone = 'no';
});
if (allDone === 'yes') $("div").removeClass("on");
setTimeout(function () {
checkOnClass();
}, 20000);
}
<body onload="checkOnClass()">
solution3
1 ACCPTED 2014-09-17 23:33:47
I combined parts of each of the other answers to get this:
var checkAll = function() {
var allDivs = $("div.block");
var classedDivs = $("div.block.on");
var allDivsHaveClass = (allDivs.length === classedDivs.length);
if (allDivsHaveClass) {
allDivs.removeClass("on");
}
};
I added a call to this in the end of this function, and tada! it all works.
$(".block").click(function(){
$(this).toggleClass("on");
$(this).prev().toggleClass("on");
$(this).nextAll().eq(4).toggleClass("on");
$(this).next().toggleClass("on");
$(this).prevAll().eq(4).toggleClass("on");
checkAll();
});
Basically, everytime a block is clicked it checks if all the blocks are clicked.
You can see it in action here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.