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

这是我的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>";
    }   
}
?>

$（“.showavgloc”）。单击（函数（）{
event.preventDefault（）；
$（“.averageloc”）。滑动切换（“慢速”）；
});
$（“.showavgvis”）。单击（函数（）{
event.preventDefault（）；
$（“.averagevis”）。滑动切换（“慢速”）；
});
尝试这样做：

在php代码之后，在关闭它之前（在“？>”）执行一个包含以下内容的“echo”：

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


$（“.showavgloc”）。单击（函数（）{
event.preventDefault（）；
$（“.averageloc”）。滑动切换（“慢速”）；
});
$（“.showavgvis”）。单击（函数（）{
event.preventDefault（）；
$（“.averagevis”）。滑动切换（“慢速”）；
});

试着用你想要的。这在某些情况下可能会有所帮助，因为当您使用jQuery库并生成html抛出代码时，DOM会保留jQuery无法正常工作的“初始”版本，因为从未找到控件。正确的顺序是：打印控件，然后绑定jQuery事件

祝你好运
试着这样做：

在php代码之后，在关闭它之前（在“？>”）执行一个包含以下内容的“echo”：

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


$（“.showavgloc”）。单击（函数（）{
event.preventDefault（）；
$（“.averageloc”）。滑动切换（“慢速”）；
});
$（“.showavgvis”）。单击（函数（）{
event.preventDefault（）；
$（“.averagevis”）。滑动切换（“慢速”）；
});

试着用你想要的。这在某些情况下可能会有所帮助，因为当您使用jQuery库并生成html抛出代码时，DOM会保留jQuery无法正常工作的“初始”版本，因为从未找到控件。正确的顺序是：打印控件，然后绑定jQuery事件

祝您好运
当所有内容都包含在内时，您的代码似乎工作正常：


$（.showavgloc”）。单击（函数（）{
event.preventDefault（）；
$（“.averageloc”）。滑动切换（“慢速”）；
});
$（“.showavgvis”）。单击（函数（）{
event.preventDefault（）；
$（“.averagevis”）。滑动切换（“慢速”）；
});

显示普通玩家
显示普通玩家
必须为本地团队显示/隐藏此div
必须为road team显示/隐藏此div
当所有内容都包括在内时，您的代码似乎工作正常：


$（.showavgloc”）。单击（函数（）{
event.preventDefault（）；
$（“.averageloc”）。滑动切换（“慢速”）；
});
$（“.showavgvis”）。单击（函数（）{
event.preventDefault（）；
$（“.averagevis”）。滑动切换（“慢速”）；
});

显示普通玩家
显示普通玩家
必须为本地团队显示/隐藏此div
必须为road team显示/隐藏此div
Show us content示例
$teams
$teams是一个包含两个字符串变量的数组：$teams=（$locteam，$visteam），在标记$locteam=“example Local team”之前定义了
$locteam
和
$visteam
的位置$visteam=“示例道路团队”；您可能应该关注生成的HTML页面，在此处查看它可能有助于获得更好的答案。向我们展示
$teams
$teams的内容示例$teams是一个包含两个字符串变量的数组：$teams=（$locteam，$visteam）在标记$locteam=“example Local Team”之前定义了
$locteam
和
$visteam
的位置$visteam=“示例道路团队”；您可能应该关注生成的HTML页面，在这里查看它可能有助于获得更好的答案。恐怕它仍然不起作用。第二个按钮不起任何作用。。。无论如何谢谢你！好的，这是‘工作的一种’！！现在，第二个按钮工作正常，而第一个按钮在单击时执行三项操作：显示/隐藏/显示。或隐藏/显示/隐藏。太神了你能用浏览器控制台检查文件并告诉我你看到了什么吗？用php生成的部分在那里？这很奇怪。。。试着在event.preventDefault（）之前加上“event.stopPropagation（）；”我认为这可以解决这个小问题是的，部分就在那里。显然一切都是正确的，除了第一个按钮工作了三次……恐怕它仍然不工作。第二个按钮不起任何作用。。。无论如何谢谢你！好的，这是‘工作的一种’！！现在，第二个按钮工作正常，而第一个按钮在单击时执行三项操作：显示/隐藏/显示。或隐藏/显示/隐藏。太神了你能用浏览器控制台检查文件并告诉我你看到了什么吗？用php生成的部分在那里？这很奇怪。。。试着在event.preventDefault（）之前加上“event.stopPropagation（）；”我认为这可以解决这个小问题是的，部分就在那里。显然一切都是正确的，除了第一个按钮工作了三次…谢谢。显然，它在循环外使用时效果非常好。问题是这两个按钮都是通过循环生成的。如果原始按钮和div按预期工作，那么唯一的解释就是循环没有正确生成它们。也许它没有在应该的时候生成div。您可以发布包含其余变量设置部分的PHP代码的其余部分吗？您是否使用Chrome的inspect工具检查了页面，以查看是否存在正确的div？它终于起作用了！这是关于零件的放置。我试着把它放在代码的末尾（远低于相关的循环），它成功了。。。谢谢大家，谢谢大家。显然，它在循环外使用时效果非常好。问题是这两个按钮都不正确