如何检查JS中是否已单击多个div？

Question

我正试图“跟踪”是否已点击所有div。如果点击了所有div，就会发生一些事情。只有在点击了所有div后才会发生这种情况。

http://jsbin.com/cawukapumi/1/ 这是我到目前为止收集的内容。 任何帮助都会受到更多的赞赏。

$(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

添加一个类，查看其计数是否与项目数相匹配：

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

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

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

    });
});

Answer 2

一般来说，你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我们正在做的是对于每个具有类clicker的div，我们绑定一个click处理程序，它将获得此div的clicked属性。然后我们检查是否已经点击了所有具有此类的div并且如果有则会弹出警告。

注意：我添加了一个课程，以便您可以告诉您何时点击了div（在我的示例中，它们现在变为蓝色）。您可以使用.hasClass实际使用它而不是数据属性。

Answer 3

1方法：您需要检查每次点击所有div是否都被点击。所以，我循环遍历你的每个div，查看属性是否已设置...如果没有，则将标准布尔值设置为false。

以下内容......

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

这有点难看，但你可以这样做：

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

这是一个小提琴：http://jsfiddle.net/xdpyx3rx/1/

Answer 5

使用jQuery和getElementsByClassName方法相结合的方法怎么样，这样你就不会利用实时NodeList在每次点击时重新查询DOM：

$(document).ready(function() {

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

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

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

演示：http://jsbin.com/wepoqumita/1/