How can i check if multiple divs have been clicked in JS?

Question

I'm trying to "track" if all divs have been clicked. If all divs have been clicked something should happen. This can only happen when all divs have been clicked.

http://jsbin.com/cawukapumi/1/ This is what i've gathered so far. Any help is more then appreciated.

 $(document).ready(function(){ $(".masterobject").click(function() { $(this).data('clicked, true'); }); if ($('#obj1').data('clicked') && $('#obj2').data('clicked') && $('#obj3').data('clicked') && $('#obj4').data('clicked') && $('#obj5').data('clicked') ) { console.log( "all has been clicked" ); } }); 

 .masterobject { position: absolute; background-color: red; z-index: 2; } #obj1 { width: 50px; height: 60px; top: 25%; left: 19%; } #obj2 { width: 150px; height: 100px; top: 12%; left: 84%; } #obj3 { width: 80px; height: 80px; top : 66%; left : 73%; } #obj4 { top: 54%; left: 28%; width: 60px; height: 70px; } #obj5 { width: 100px; height: 100px; top: 45%; right: 13%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="masterobject" id="obj1"></div> <div class="masterobject" id="obj2"></div> <div class="masterobject" id="obj3"></div> <div class="masterobject" id="obj4"></div> <div class="masterobject" id="obj5"></div> 

Answer 1

Add a class, see if its count matches the count of items:

$(document).ready(function(){
    $(".masterobject").click(function() {

        $(this).addClass("clicked");

        if ($(".masterobject").length == $(".clicked").length)
             alert("all clicked");

    });
});

Answer 2

In general, you could do something like this:

 var clickers = $(".clicker"); clickers.on("click", function() { $(this).data("clicked", true); $(this).addClass("clicked"); var all = true; clickers.each(function() { all &= $(this).data("clicked"); return all; }); if (all) { alert("all clicked!"); } }); 

 .clicker { background-color: red; width: 100px; height: 100px; position: absolute; } .clicked { background-color: blue; } #div1 { left: 10px; top: 10px; } #div2 { left: 10px; top: 130px; } #div3 { left: 130px; top: 10px; } #div4 { left: 130px; top: 130px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="clicker" id="div1"></div> <div class="clicker" id="div2"></div> <div class="clicker" id="div3"></div> <div class="clicker" id="div4"></div> 

What we are doing is for every div with the class clicker we bind a click handler that will get the clicked property of this div. Then we check to see if all divs with this class have been clicked and pop an alert if they have.

Note: I added a class so you can tell when you've clicked a div (in my example, they now turn blue). You could actually use that instead of a data property by using .hasClass .

Answer 3

1 approach: You'll need to check if all the divs are clicked each time one is clicked. So, I'd loop through each of your div 's, see if the attribute is set... and if not, set a standard boolean var to false.

Something like the following...

var allClicked = true;
$('.masterobject').each(function(){
    if(!$(this).data('clicked')){
        allClicked=false;
        return false;
    }
});

if(allClicked){
    alert('yay!');
}

http://jsbin.com/kokumohohe/2/edit?output

Answer 4

It is a bit ugly, but you can do something like:

div1 = "1";
div2 = "1";
div3 = "1";
divSum = div1 + div2 + div3;
console.log(divSum);

$("#div1").click(function() {
    div1 = "2";
    check();
});
$("#div2").click(function() {
    div2 = "2";
    check();
});
$("#div3").click(function() {
    div3 = "2";
    check();
});

function check () {
    divSum = div1 + div2 + div3;
    if (divSum = 222) {
        alert("TAdaaahh!");
    };
}

Here is a fiddle: http://jsfiddle.net/xdpyx3rx/1/

Answer 5

What about this approach using combination of jQuery and getElementsByClassName method, which allows you not to requery DOM on each click taking advantage of live NodeList:

$(document).ready(function() {

    var clicked = document.getElementsByClassName('clicked');
    var $masterObjects = $(".masterobject").click(function() {

        $(this).addClass("clicked");

        if ($masterObjects.length === clicked.length) {
             alert("all clicked");
        }
    });
});

Demo: http://jsbin.com/wepoqumita/1/