多個元素刪除特定類時更改innerHTML

我有10個具有多個類的元素。其中5人有.home和.not-added，其中5人有.away和.not-added。有了jQuery，當事件發生時，我爲特定元素切換類.not-added。我想檢查這10個元素何時沒有類.not-added，以便我可以更改元素的innerHTML。多個元素刪除特定類時更改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>

可能是什麼問題呢？

來源

2016-08-27 Lukas Baliūnas

你能分享小提琴嗎 –

你的循環是不正確的。你每次通過循環覆蓋'ready'，所以它沒有關於所有10個元素的信息，只是最後一個元素。 – Barmar

@LukasBaliūnas，試試我的答案！ – Ehsan

您需要.hasClass()指定類名之後。在你的情況：使用.hasClass('not-added)而不是錯誤的.hasClass('.not-added')。這裏有你的使用案例working JSFiddle。

注意，這將是更好地使用for循環而不是.each()，因爲你可以利用的條件，以檢查您的標誌（在你的情況準備），以避免通過所有元素的迭代。

來源

2016-08-27 11:20:42

下面的示例代碼修改後的版本，

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>

來源

2016-08-27 11:17:14 djsreeraj

你只是在錯誤的方式使用hasClass，你應該通過類名作爲參數（沒有.因爲它不是選擇器）：

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

在你的代碼的條件將永遠不會匹配，這就是爲什麼變量ready是true循環

來源

2016-08-27 11:18:38 Dario

試試：

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

來源

2016-08-27 11:34:03 Ehsan

@LukasBaliūnas，試試我的回答！ – Ehsan

你的ready變量每循環一次重寫，所以它不會告訴你如果所有元素都沒有not-added類。

而不是一個循環，只需檢查該類的元素的數量。

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

來源

2016-08-27 11:36:47 Barmar

多個元素刪除特定類時更改innerHTML

回答

相關問題