Изменить класс с помощью JavaScript для строки, когда количество строк неизвестно

Question

Я хочу, чтобы каждый раз, когда я нажимал на строку, у меня был всплывающий элемент div.Я пытался сделать это с помощью JavaScript, чтобы переключить класс.Мы заполняем таблицу пользовательскими типами записей WordPress, и количество строк для них неизвестно.

Идентификатор "bedrijfsinfo-x" генерируется правильно, и функция подсчитывает правильное количество строк.Он по-прежнему переключает класс на все элементы div, а не только на тот, который связан со строкой, на которую я нажал.

Любая помощь будет принята с благодарностью!

<?php $counter = 1 ; ?>
    <?php
        // Als er berichten zijn gevonden.
        if ( $posts->have_posts() ) {
            // While loop om alle berichten op te halen
            while ( $posts->have_posts() ) :
                $posts->the_post();
                global $post;
                ?>

                <tr id="su-post-<?php the_ID(); ?>" class="su-post contracten">
                    <td class="meta_data" onclick="showInfo()"><?php bedrijfsnaam(); ?></td>
                    <td><?php naam_contactpersoon(); ?></td>
                    <td><?php url(); ?></td>  
                    <td><?php start(); ?></td>
                    <td><?php eind(); ?></td>
                    <td><?php frequentie(); ?></td>
                    <td><?php datum_onderhoud(); ?></td>
                </tr>
                <div id="bedrijfsinfo-<?php echo $counter?>" class="infobox">
                    <p>Bedrijfsinformatie<br><?php bedrijfsnaam() . url() . start() . eind(); ?></p>
                    <button onclick="showInfo()"><p class="button">Sluiten</p></button>
                </div>
                <?php $counter = $counter + 1; ?>
        <?php endwhile; }

<script>

function showInfo() {
    var tr_count = document.getElementsByTagName("tr").length;
    for (var i = 1; i < tr_count; i++) { 
        var popup = document.getElementById("bedrijfsinfo-"+ i);
        popup.classList.toggle("show");
     }
}

</script>

Answer 1

Ваша функция showInfo выполняет итерацию по всему количеству строк. Похоже, это не то, что вы хотите. Может быть, попытаться передать в ID вещь нажал?

<td class="meta_data" onclick="showInfo(<?php $counter; ?>)"><?php bedrijfsnaam(); ?></td>
// ...
<button onclick="showInfo(<?php $counter; ?>)"><p class="button">Sluiten</p></button>

function showInfo(i) {
  var popup = document.getElementById("bedrijfsinfo-"+ i);
  popup.classList.toggle("show");
}