Как использовать Jquery Hide / Show с циклом foreach в PHP

Question

Мне нужен раздел read more, который расширяется без ссылки на другую страницу, поэтому я пытаюсь реализовать Jquery Show / Hide.

Расширяемые данные поступают из цикла foreach в php, и я создал функцию, которая добавляет разметку html, если содержимое достаточно длинное

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

Как мне заставить эту работу работать только по той ссылке, на которую нажали. Есть ли способ добавить переменные из PHP в Jquery?

Сценарий Jquery в заголовке HTML

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('name#read').hide();  
$('a#read_more').click(function(){
$('name#read').slideDown('slow');               
}); 
$('a#read_less').click(function(){
$('name#read').slideUp('slow');
});
});
 </script>

Функция PHP

function read_more($content){

if (strlen($content) < 150){
    return $content;
} else {
    $content = substr($content,0,150) . "......<a href='#' id='read_more'>read more</a>" . "<a name id='read'>" . substr($content,150) . "</a>";
    return $content;
}   

}

Answer 1

То, что вы ищете, это: http://api.jquery.com/event.stopPropagation/ Используйте event.stopPropagation () в вашем обработчике кликов, чтобы он оставался на той же странице.

Что касается нескольких шоу, то это, вероятно, потому, что вы НЕ генерируете уникальные идентификаторы !! Имейте либо атрибуты data- * в своем теге html, либо добавляйте уникальный идентификатор к тегам «a». Примерно так должно работать:

$('a.readMore').click(function() {
   event.stopPropagation();
   var data_id = $(this).data('contentId');
   $('#'+data_id).show(); //or fadeIn or slideUp/Down...
}

Ваш HTML-код будет выглядеть примерно так:

<a href="#" class="readMore" data-contentId="1">...read more</a>
<div id="1">My Content to show goes here</div>

Не нужно быть div, но вы поняли ...