ループ内のトグルスクリプトは、最初の繰り返しでのみ機能します

Question

ここに私のPHP/javascriptコードです。ループ内にスクリプトを書き込もうとしましたが、動作しません。これはローカルチームを処理している間にローカルチームに1つ、ロードチームを処理している間に2つのボタンを生成します。これらのボタンは、別のクラスのdivに含まれる情報を表示します。何らかの理由で、それはループの最初の反復であるローカルチームに対してのみ機能します。

私はクラスの代わりにIDを使っている人についてたくさん読んでいますが、これは私のケースではありません。私はかなり失われています。

ありがとうございました。含まれるPHPコードの後に​​

、そして近いこと（これの前に ">？"）の前に、 "エコー" を実行します：これを行うには

<script> 
    $(".showavgloc").click(function(){ 
     event.preventDefault(); 
     $(".averageloc").slideToggle("slow"); 
    }); 
    $(".showavgvis").click(function(){ 
     event.preventDefault(); 
     $(".averagevis").slideToggle("slow"); 
    }); 
</script> 
<?php 
foreach ($teams as $team) { 
    if ($page=="game") { 
     if ($team==$locteam) { 
      echo "<button class='showavgloc'>Show average player</button>"; 
     } 
     if ($team==$visteam) { 
      echo "<button class='showavgvis'>Show average player</button>"; 
     } 
    } 
    if ($team==$locteam) { 
     echo "<div class='averageloc' style='display:none'>This div has to be shown/hidden for local team</div>"; 
    } 
    if ($team==$visteam) { 
     echo "<div class='averagevis' style='display:none'>This div has to be shown/hidden for road team</div>"; 
    } 
} 
?> 

Answer 1

てみ

<script> 
    $(".showavgloc").click(function(){ 
     event.preventDefault(); 
     $(".averageloc").slideToggle("slow"); 
    }); 
    $(".showavgvis").click(function(){ 
     event.preventDefault(); 
     $(".averagevis").slideToggle("slow"); 
    }); 
</script> 

とあなたが望むように使ってみてください。これは、jQueryライブラリを使用してhtmlスローコードを生成すると、DOMが "初期"バージョンを保持し、コントロールを決して見つけられないため、jQueryが正しく機能しないために役立ちます。正しい順序は、コントロールを印刷してjQueryイベントをバインドすることです。すべてが含まれている場合

幸運

Answer 2

あなたのコードは正常に動作するようです：

$(".showavgloc").click(function(){ 
 
    event.preventDefault(); 
 
    $(".averageloc").slideToggle("slow"); 
 
}); 
 
$(".showavgvis").click(function(){ 
 
    event.preventDefault(); 
 
    $(".averagevis").slideToggle("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class='showavgloc'>Show average player</button> 
 
<button class='showavgvis'>Show average player</button> 
 
<div class='averageloc' style='display:none'>This div has to be shown/hidden for local team</div> 
 
<div class='averagevis' style='display:none'>This div has to be shown/hidden for road team</div>

私の推測では、他の何かが間違っているということです。あなたのページを調べて、PHPによってすべての要素が正しく印刷されていることを確認してください。すべてがうまくいけば、jQueryの "on"関数を使ってみることができます。この関数は、セレクタに一致する新しい要素を監視する必要があります。 https://api.jquery.com/on/