JQuery работает только с результатами поиска SQL при использовании 'echo' в PHP

Question

Я написал поисковый код, который отображает данные из моей базы данных MySql через PHP.Это список книг с описаниями, ценами, темами и т. Д. ... Некоторые из них являются базовыми и должны быть просмотрены немедленно (например, название, цена), некоторые из них являются более сложными и не должны демонстрироваться, если тольковызывается пользователем (например, описание, рецензент и т. д.).

Я бы хотел, чтобы это было сделано, нажав на основной текст и выполнив раскрытие более сложного текста.Я выбрал функцию JQuery «slidetoggle», заключающую основной текст в «базовый» div, который при нажатии вызывает второй «more» div.

Это работает для лучшего результата, но не работает для каких-либо дальнейших выходных данных, почти как если бы скрипт остановился после первого набора элементов div и не продолжал работать для других результатов.

Надеюсь, это имеет смысл, вот мойкод -

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

$(document).ready(function(){
$("#basic").click(function(){
        $("#more").slideToggle("slow");
  });
});


</script>

и для эха -

    echo "

<div id='basic'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

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

Я также пытался поместить java в раздел "echo", но опять же это означало, что сработал максимальный результат, но никаких других.

Полагаю, мне могут понадобиться некоторыесвоего рода функция цикла, изменение с помощью инструкции num_rows или способ переименования каждого div по отдельности, то есть basic1, basic2, basic3, но я уверен, что должен быть более простой способ сделать это.

Любая помощьили ссылки на учебники / другие ответы на вопросы высоко ценится.

Answer 1

Я думаю, что это работает только для первого элемента, потому что вы используете идентификатор, когда вы должны использовать класс для вашего div.Идентификаторы должны использоваться только один раз на странице, тогда как классы могут использоваться несколько раз.Попробуйте это jQuery:

$(document).ready(function(){
$(".basic").click(function(){
        // restrict selection to just the children of this (.basic div)
        $(".more", $(this)).slideToggle("slow");
  });
});

С этим php:

echo "
    <div class='basic'>
        <img src='/ctr/$pic'>
        $name - $topic - $format - $mark - $price
        <div class='more' style='display:none;'>
        $description - $gender - $age - $reviewer
        </div>
    </div>
    <hr>
";

Answer 2

Работает только верхний результат, потому что вы используете идентификатор в качестве селектора, и это в jquery повторяет только один результат (идентификаторы должны быть уникальными), вы можете сделать:

JQuery

$(document).ready(function(){
$(".toggle").click(function(){
        $(this).find("#more").slideToggle("slow");
  });
});

PHP:

     echo "

<div class='toggle'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

Таким образом, вы присоединяете событие к классу, и каждый раз, когда вы нажимаете этот div, он ищет div с id = more у его потомков - это работает для любого числа div на вашей странице

посмотрите на пример http://jsbin.com/etawav/edit#preview