javascript - 我如何检查是否在 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");

    });
});