複数の要素に特定のクラスが削除されている場合の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

後trueです。あなたの場合：.hasClass('.not-added')の代わりに.hasClass('not-added)を使用してください。あなたのユースケースにはworking JSFiddleがあります。あなたがすべての要素を反復を避けるために、（あなたのケースで準備）あなたのフラグをチェックするための条件を利用することができますので、ループ代わりに.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だマッチしたことがないであろうあなたは.hasClass()でクラス名を指定する必要がループ

出典

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の変更

答えて

関連する問題