Question

JSFiddle在这里http://jsfiddle.net/jaredasch1/eayc4mj3/

我正在使用JSFiddle进行游戏，我遇到了一些问题。一旦所有方框都有“.on”类，我想将它们全部重置为没有类“.on”并执行新操作。但是，我似乎找不到办法做到这一点。我在这里寻找答案，但所有答案似乎都不起作用。

这是我的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>

这是我的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;
    }

最后，这是我的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);

如果有人有任何答案，请回复，我很乐意以开放的心态尝试。谢谢！

Answer 1

您可以使用jQuery获取所有div，然后在另一个调用中获取on类的所有div。你会得到两个对象。只是比较它们的长度;）

var allDivs = $("div");
var classedDivs = $("div.on");

var allDivsHaveClass = (allDivs.length === classedDivs.length);

则...

if (allDivsHaveClass) {
    allDivs.removeClass("on");
}

这将只删除on类。如果您想删除其他类，也可以清除div的class属性，如下所示：

allDivs.attr("class", "");

Answer 2

另一种方法是使用each（）函数：

var allDone = 'yes';
$("div.block").each(function (i) {
    if (!$(this).hasClass("on")) allDone = 'no';
});

if (allDone === 'yes') $("div.block").removeClass("on");

但首先你需要一个事件来触发这个检查。假设您要每20秒检查一次，以确定类.block的所有div元素是否也具有类.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()">

Answer 3

我将其他每个答案的部分组合起来得到这个：

var checkAll = function() {
    var allDivs = $("div.block");
    var classedDivs = $("div.block.on");

    var allDivsHaveClass = (allDivs.length === classedDivs.length);

    if (allDivsHaveClass) {
        allDivs.removeClass("on");
    }
};

我在这个函数的最后添加了一个调用，并且tada！一切正常。

$(".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();
});

基本上，每次单击一个块时，它都会检查是否单击了所有块。

你可以看到它in action here。

我如何看待我的所有分区是否有课程？

3 个答案: