Выпадение скрытого блока для данных из базы в цикле while

Question

Вывожу на страницу иностранные слова словаря и при нажатии на иностранное слово хочу раскрыть текст с его переводом. Данные беру из mysql. Использую php и html.

<?php
$result=mysql_query("SELECT * FROM dictionary",$db);
$myrow=mysql_fetch_assoc($result);
                
while ($myrow = mysql_fetch_assoc($result)) 
{
?>
        
<p><a href="#hidden" onclick="view('hidden'); return false"><?php echo $myrow['word'];?></a></p>
<div id="hidden" style="display: none;">
<p>
<?php echo "<p>Перевод слова: ". $myrow["in_russian"]."</p>"; ?>
</p></div>
<?php } ?>

Плюс следующий скрипт:

<script>function view(n) {style = document.getElementById(n).style;
    style.display = (style.display == 'block') ? 'none' : 'block';
    }</script>

Проблема в том, что в итоге я получаю результат только для первого слова, остальные слова при нажатии на их ссылки открывают ссылку первого слова. Что-то с циклом.

Answer 1

Проблема в том, что все элементы на страницы имеют id=hidden. Поэтому getElementById берёт только первый попавшийся.

Решение: Все идентификаторы должны быть уникальны на странице, либо сделать класс и работать с классом, либо передавать в функцию this и работать с переданным элементом, без всяких getElementById

document.querySelectorAll('.eng-word').forEach(item => {
    item.addEventListener('click', event => {
        event.preventDefault();
        let el = item.closest('.wrapper').querySelector('.translation');
        el.style.display = (el.style.display == 'block') ? 'none' : 'block';        
    });
});

.translation {
    display: none;
}

<div class="wrapper">
    <p><a href="#hidden" class="eng-word">House</a></p>
    <div class="translation">
      <p>Перевод слова: Дом</p>
    </div>
</div>

<div class="wrapper">
    <p><a href="#hidden" class="eng-word">Tree</a></p>
    <div class="translation">
      <p>Перевод слова: Дерево</p>
    </div>
</div>

БЛОГ НА HUSL

Выпадение скрытого блока для данных из базы в цикле while

Ответы (1 шт):