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

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 代码之后，在关闭它之前(在这个“?>”之前)，执行一个包含以下内容的“echo”:

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

并尝试按您想要的方式使用它。这在某些情况下可能会有所帮助，因为当您使用 jQuery 库然后生成 html 抛出代码时，DOM 会保留“初始”版本，jQuery 无法正常工作，因为永远找不到控件。正确的顺序是:打印控件，然后绑定(bind) jQuery 事件。

祝你好运