CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Duro
Duro

Reputation: 33

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

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>

Upvotes: 1

Views: 1279

Answers (5)

dfsq
dfsq

Reputation: 193261

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/

Upvotes: 0

Caio Kawasaki
Caio Kawasaki

Reputation: 2950

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/

Upvotes: 0

Alex K.
Alex K.

Reputation: 175796

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");

    });
});

Upvotes: 2

Dave Salomon
Dave Salomon

Reputation: 3287

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

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45135

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.

Upvotes: 1

Related Questions