Переключить скрипт внутри цикла работает только для первой итерации

Question

Вот мой код php/javascript. Я попытался написать скрипт внутри цикла, но он не работает. Это создает две кнопки: одну для местной команды, при обработке местной команды, а вторую для команды по дороге, при обработке команды по дороге. Эти кнопки отображают информацию, содержащуюся в div другого класса. По какой-то причине он работает только для местной команды, которая представляет собой первую итерацию цикла.

Я много читал о людях, использующих id вместо классов, но это не мое дело. Я совершенно потерян.

Большое спасибо за помощь.

<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

Попробуйте сделать это:

после этого PHP кода, и перед близко он (до этого ">?"), Сделать "эхо", который содержит:

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

и попробуйте использовать его по своему усмотрению. Это может помочь в некоторых случаях, потому что, когда вы используете библиотеку jQuery и затем генерируете код html throw, 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/