当多个元素移除一个特定的类时，改变innerHTML

Changing innerHTML when multiple elements have a specific class removed

本文关键字：innerHTML 改变 元素 一个      更新时间：2023-09-26

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

有什么问题吗?

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

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

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

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

在你的代码中，条件永远不会匹配，这就是为什么变量ready在循环

之后是true。

试一试:

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

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

不使用循环，只使用该类检查元素的计数。

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

这里是修改后的示例代码，

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

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

相关文章：