为什么我的脚本只作用于具有特定 ID 值的第一个元素？答案

【问题标题】：Why does my script only act on the first element with a particular ID value?为什么我的脚本只作用于具有特定 ID 值的第一个元素？
【发布时间】：2020-07-18 22:19:14
【问题描述】：

我有一个查询会产生许多 DIV id="toggle_panel" 我知道我可以有效地动态更改 DIV 的 ID。

以下是直接来自 w3schools 的脚本，开箱即用，效果很好……仅适用于第一个 DIV 和第一个 DIV。如何将查询中的动态变量应用于我的脚本？

第二个问题：我如何获得它以便默认隐藏 DIV？

function myFunction() {
  var x = document.getElementById("toggle_panel");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

谢谢

【问题讨论】：

如果您有许多具有相同 ID 的元素，则您的 HTML 无效。您没有理由期望查找 ID 的选择器会作用于多个 ID。
换句话说，ID必须是唯一的
我的 php 中有这个： echo '
';

标签： javascript html toggle visibility

【解决方案1】：

对于您的第一个问题，使用一个类来标记一个集合类似的 html 元素会更合适。

所以你的 div 应该是这样的：

<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>

然后您可以使用document.getElementsByClassName('toggle_panel') 访问它们。

同样要默认隐藏它们，您可以使用 css 来定位您的类，如下所示。

.toggle_panel {
   display: none;
}

【讨论】：

【解决方案2】：

如 cmets 中所述，您只能拥有一个 ID 实例。要获得您想要的结果，您必须将<div id="toggle_panel">content</div> 更改为<div class="toggle_panel">content</div>。然后使用以下javascript：

function myFunction() {
  var panels = document.getElementsByClassName("toggle_panel");
  for(var i = 0; i < panels.length; i++) {
    var panel = panels[i];   
    if (panel.style.display === "none") {
       panel.style.display = "block";
    } else {
       panel.style.display = "none";
    }
  }

}

【讨论】：

感谢您的所有回复。我会开始测试它们。
我应该把 Javascript 函数放在哪里？我尝试将它放在
@Jwrbloom 通常您希望将 JS 代码放在标记或单独的 .js 文件中。但我不知道整个代码的结构，所以它可能位于不同的位置。我会先尝试将它放在标记中。
访问 .js 文件的方式是否与访问 .php 文件的方式相同？包含或需要？
@Jwrbloom 它不会像 PhP include 或 require 那样工作：这发生在后端。将以下内容放在中：然后您可以在 html 代码中使用该文件中创建的函数

【解决方案3】：

我认为你应该使用 QuerySelectorAll('toggle_panel') 你的代码会是这样的：

Array.from(document.QuerySelectorAll('toggle_panel')).forEach((element) => {
 element.display = 'none'
})

【讨论】：

我应该把它放在我的 PHP 文件的什么地方？在 While 循环中？

【解决方案4】：

@chiel

这是在我的 WHILE 循环中。


                echo '<button onclick="myFunction()">Updates</button>';
                // Script for this placed in the theme custom code panel

                echo '<script type="text/javascript">
                        function myFunction() {
                          var x = document.getElementById("update_panel_'. $current_player .'");
                          if (x.style.display === "none") {
                            x.style.display = "block";
                          } else {
                            x.style.display = "none";
                          }
                        }
                        </script>';



            }


            // This is where might try to toggle the visibility 



            echo '<div id="update_panel_'.$current_player .'" class="event_card">';

            // Event, game opponent or just a general assessment
                echo '<div class="event_information">';         
                        // This is if it's a single game
                        if (isset($row['opp_school'])) {
                            echo '<span class="opponent_main">Game vs.  ';

                            // School and city if necessary
                            if(isset($row['opp_city']) && ($row['otoggle'] == 1)) {
                            echo $row['opp_city'] .' ';
                            }

                            echo $row['opp_school'] . '</b>';

                            echo '</span>';
                            }   

                        // If this is about an event                
                        elseif (isset ($row['event'])) {
                            echo '<span class="opponent_main">Event:  ' . $row['event'] . '</span>';    
                            }
                        // Just a general assessment    
                        else {
                            echo '<span class="opponent_main">General Assessment</span>';
                            }   

                    // Finish up with the date and the review
                    echo '<div class="review_date"><b>' . $date . '</b></div>';

                    // Finish up with the date and the review
                    echo '<div class="update_review">' . $row['review'] . '</div>';


                echo '</div>'; // end of event or opponent  and review

【讨论】：