循环内的切换脚本仅适用于第一次迭代

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/