Развернуть и свернуть абзацы с помощью JQuery внутри цикла

Question

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

Вот мой код просмотра:

<? foreach ($e['comments'] as $comment) : ?>
    <div class="comment">
        <p class="collapsed">
            <?=character_limiter($comment['comment'], 100) ?><br />
            <a href="#" class="expand">Show More</a>
         </p>
         <p class="expanded">
             <?=$comment['comment'] ?>
             <a href="#" class="collapse" >Show Less</a>
         </p>
     </div>
<? endforeach; ?>

А вот что у меня есть с jQuery:

$(document).ready(function()
{ 
$("p.expanded").hide();

$("a.expand").click(function()
{
        $(this).parent().hide();

        return false;
    });
});

Я могу скрыть правильный

при нажатии «Показать больше», однако я теряюсь в выборе правильного «расширенного» абзаца, а затем реализую противоположное для свертывания.
Пока я думаю, что мне нужно как-то заставить рассматриваемые элементы иметь уникальные идеи,Массив $ comment действительно имеет значение 'id', которое код добавляет к имени идентификатора для каждого атрибута, что делает их уникальными, но я все еще не понимаю, как правильно выбирать вещи с помощью jQuery.

Answer 1

идентификаторы - не единственный способ нацеливания на отдельные элементы - вы можете нацеливать элементы вокруг текущего элемента jQuery, используя различные методы, так же как вы используете parent .

должен иметь возможность нацеливаться на соответствующий «расширенный» блок, используя siblings () :

$("a.expand").click(function()
{
    $(this).parent().hide();
    $(this).parent().siblings('.expanded').show();

    return false;
});