создание скользящих меню в цикле while с динамическими данными с использованием jquery

Question

Я использую php для отображения таблицы данных, взятых из моей базы данных mysql. У меня есть цикл while, который проходит по каждой строке и выплевывает пользовательские данные.

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

Когда я нажимаю на ссылку с подробной информацией, она всегда открывает только самый верхний элемент div ... потому что мои идентификаторы не уникальны. Чтобы сделать div уникальным, я мог бы просто подсчитать им и href счетчик, но я не уверен, как передать это в jquery в качестве параметра, чтобы при щелчке ссылки «подробнее» рядом с именем пользователя отображались дополнительные сведения. div, специфичный для этого пользователя.

Я играю с приведенным ниже кодом без особой удачи, помощь оценена. Спасибо.

   <script type = "text/javascript">
    $(document).ready(function(){
        $('a.moreDetails').click(function() {
            $("#moreDetails").toggle('fast');
        });
    });
    </script>


while()
{

user info...  more details href
<div></div> to display below once more details href has been clicked.

}

Answer 1

Как насчет:

$('a.moreDetails').click(function() {
    $(this).next().toggle('fast');
});

Это займет следующий элемент после якорной ссылки (<a>) и переключит его.

Тогда HTML может выглядеть как

User 1 (username) <a href="#" class="moreDetails">(details)</a>
<div class="details">More details about User 1</div>

Answer 2

, если ваш код выглядит примерно так:

while()
{

user info...  more details href
<a class="moreDetails" href="">blabla more details</a>
<div></div> to display below once more details href has been clicked.

}

тогда вы можете переключать div после ссылки "moreDetails" следующим образом:

$(document).ready(function(){
       $('a.moreDetails').click(function() {
            $(this).next().toggle('fast');
    });
});