Скрытие / отображение нескольких элементов div в соответствии с выборкой данных из базы данных
Вот мой PHP-код, который извлекает результаты из нескольких строк из базы данных.
<p id = "show-desc">
<?php echo $db_description = $row['description']; ?> </p>
И вот мой код jQuery, который изначально скрывает абзац после получения результата из базы данных и при нажатии кнопки показывает скрытый абзац.
<script>
$(document).ready(function(){
$("#show-desc").hide();
$("#show-details").click(function(){
$("#show-desc").show();
});
});
</script>
Теперь он отлично работает там, где есть только одна выборка строки из базы данных. Но это не работает, когда есть несколько строк. Он скрывает только первую строку, а остальные видны.
Идентификатор абзаца тоже повторяется ?? или только содержание параграфа увеличивают?
«Вот мой PHP-код, который извлекает результаты из нескольких строк из базы данных.» ... PHP, который вы показали, будет печатать только одно поле. Пожалуйста, покажите это в контексте. Если вы используете цикл для повторения этого вывода в PHP, тогда у вас есть проблема, потому что он создаст много элементов HTML с одним и тем же идентификатором - это недопустимо, браузер не может отличить их друг от друга, поэтому он не может знать, какой из них отображать и Спрятать
Похоже, вы дублируете атрибуты id, что является недопустимым HTML. Вместо этого используйте классы и просматривайте DOM, чтобы найти элементы, связанные с тем, который вызвал событие. Если вам нужен пример этого, отредактируйте свой вопрос, включив в него более полный образец HTML.
Используйте класс вместо идентификатора для тегов <p>
да, я тоже пробовал класс. но он показывает несколько кнопок, а не содержимое в нем. Когда нажимаю на кнопку, ничего не происходит.
"он показывает несколько кнопок, а не содержимое в нем" ... Я понятия не имею, что вы сделали, чтобы это произошло, но я не думаю, что это то, что здесь предлагали. Пожалуйста, покажите HTML в контексте должным образом, как требуется, а также покажите, как вы создаете свою кнопку «показать детали». Я предполагаю, что в конечном итоге будет одна кнопка на абзац?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуйте следующее:
<p class = "show-desc"> </p>
<script>
$(document).ready(function(){
$(".show-desc").hide();
$(".show-details").click(function(){
$(this).show(); //
});
});
</script>
Что такое $(".show-details") в этом коде? Мы не знаем из кода OP, но это определенно не тот же элемент, что и скрытый абзац. Скорее всего, это кнопка. Поэтому ваш код просто сделает кнопку видимой ... но если пользователь нажал на нее, кнопка уже видна ... и в любом случае это не то, что нужно. Согласно моему последнему комментарию по основному вопросу, у нас недостаточно информации для полного решения проблемы.
разве вы не пробовали реализовать классы вместо идентификаторов?