0

Вывожу на страницу иностранные слова словаря и при нажатии на иностранное слово хочу раскрыть текст с его переводом. Данные беру из 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>

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

1
  • И каким образом скрипт должен понять что в document.getElementById(n) имеется в виду первый, второй, третий или десятый блок? У них у всех id одинаковые.
    – u_mulder
    28 янв 2021 в 9:08

1 ответ 1

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>

8
  • Да, сейчас вижу. JavaScript еще не изучал, поэтому этот скрипт вслепую взял из стороннего источника. Если не трудно, можете помочь с решением проблемы? Может без JavaScript можно сделать так же? Но думаю проблема с идентификаторами останется в любом случае.
    – Bob
    28 янв 2021 в 9:34
  • @Bob сделал пример. Внимательно посмотрите на разметку, на классы и пр. Чтобы пыхой генерировать примерно так же 28 янв 2021 в 9:56
  • @Bob Если ответ поможет - можно ткнуть галочку напротив ответа и стрелочку вверх)) 28 янв 2021 в 9:56
  • Первый код - это JavaScript? Его мне взять в теги <script> взамен моего?
    – Bob
    28 янв 2021 в 10:35
  • @Bob да........ 28 янв 2021 в 11:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.