Почему мой сценарий действует только на первый элемент с определенным значением идентификатора?

Question

У меня есть запрос, который выдает число DIV id = "toggle_panel". Я знаю, что могу эффективно динамически изменять идентификатор DIV.

Ниже приведен скрипт, прямо из w3schools, который отлично работает из коробки ... только для первого DIV и первого DIV. Как применить динамическую c переменную из запроса к моему сценарию?

Второй вопрос: как мне получить так, чтобы DIV были скрыты по умолчанию?

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

Спасибо

Answer 1

@ chiel

Это в моем WHILE l oop.

                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

Answer 2

Как уже упоминалось в комментариях, вы можете иметь только один экземпляр идентификатора. Для достижения желаемого результата вам придется изменить <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";
    }
  }

}

Answer 3

Я думаю, вы должны использовать QuerySelectorAll ('toggle_panel'), и ваш код будет выглядеть так:

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

Answer 4

Для вашего первого вопроса, использование класса было бы более уместно пометить коллекцию подобных html элементов.

Так что ваши div'ы должны выглядеть примерно так:

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

You затем можно использовать document.getElementsByClassName('toggle_panel') для доступа к ним.

Также, чтобы скрыть их по умолчанию, вы можете использовать css для нацеливания на ваши классы, как показано ниже.

.toggle_panel {
   display: none;
}