Question

我有10个具有多个类的元素。其中5个有.home和.not-added个类，其中5个有.away和.not-added。在事件发生时使用jQuery我为特定元素切换类.not-added。我想检查这10个元素何时没有类.not-added，以便我可以更改元素的innerHTML。

我的检查方法：

<script>
    $(document).ready(function () {
        var ready = false;

        $(".home").each(function (i) {
            if ($(this).hasClass(".not-added")) {
                ready = false;
            } else {
                ready = true;
            }
        });
        if (ready) {
            document.getElementById("button1").innerHTML = "Points";
        }
    });
</script>

这不起作用。加载页面后，#button1内部已有Points。

我的元素示例：

活动前

：

<div class='dropdown-toggle stat-dropdown not-added home' data-toggle='dropdown'>
    ...
</div>

活动结束后

：

<div class='dropdown-toggle stat-dropdown home' data-toggle='dropdown'>
    ...
</div>

可能是什么问题？

Answer 1

这里是示例代码的修改版本，

https://jsfiddle.net/djsreeraj/j65rwbg2/1/

＆＃13;

$(document).ready(function (){
   var ready = false;

$(".home").each(function (i) {
    if ($(this).hasClass("not-added")) {
        ready = false;
    }
    else {
        ready = true;
    }
});

$(".away").each(function (i) {
    if ($(this).hasClass("not-added")) {
        ready = false;
    }
    else {
        ready = true;
    }
});

  //alert(ready);
  if (!ready) {
    document.getElementById("button1").innerHTML = "Points--s";
}

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="home  not-added"></div>
<div class="home  not-added"></div>
<div class="home  not-added"></div>
<div class="home  not-added"></div>
<div class="home  not-added"></div>

<div class="away  not-added"></div>
<div class="away  not-added"></div>
<div class="away  not-added"></div>
<div class="away  not-added"></div>
<div class="away  not-added "></div>

<Button id="button1"> Points
</Button>

＆＃13;

Answer 2

您只是以错误的方式使用hasClass，您应该将类名作为参数传递（没有.因为它不是选择器）：

if ($(this).hasClass("not-added")) {

在您的代码中，条件永远不会匹配，这就是循环后变量ready为true的原因

Answer 3

您需要在.hasClass()中指定班级名称。在您的情况下：使用.hasClass('not-added)而不是错误的.hasClass('.not-added')。这是一个working JSFiddle与您的用例。

请注意，最好使用 for循环而不是.each()，因为您可以利用条件来检查您的标记（ ready in你的情况），以避免遍历所有元素。

Answer 4

试一试：

$(document).ready(function(){

    $(".home").on("click",function(){

        $(this).toggleClass("home clicked");

        if ($(".home").length < 1)

            $("#button1").text("Points");
    })

})

最终代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .clicked {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="home not-added">I have class home and not-added (click on me!)</div>
    <div class="home not-added">I have class home and not-added (click on me!)</div>
    <div class="home not-added">I have class home and not-added (click on me!)</div>
    <div class="home not-added">I have class home and not-added (click on me!)</div>
    <div class="home not-added">I have class home and not-added (click on me!)</div>
    <br><br>
    <button id="button1">I am Button</button>
    <br><br>
    <div class="away not-added">I have class away and not-added</div>
    <div class="away not-added">I have class away and not-added</div>
    <div class="away not-added">I have class away and not-added</div>
    <div class="away not-added">I have class away and not-added</div>
    <div class="away not-added">I have class away and not-added</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
    $(document).ready(function(){

        $(".home").on("click",function(){

            $(this).toggleClass("home clicked");
            if ($(".home").length < 1)
                $("#button1").text("Points");
        })

    })
    
    </script>
</body>
</html>

Answer 5

每次循环都会覆盖ready变量，因此它不会告诉您所有元素是否都没有not-added类。

而不是循环，只需检查该类的元素数。

ready = $(".home.not-added").length == 0;

当多个元素删除了特定类时，更改innerHTML

5 个答案: