Событие jQuery, влияющее только на этот экземпляр элемента

Question

У меня есть более одного элемента с тем же именем класса, в идеале их будет семь, поэтому в pageload они будут скрыты, а затем я хочу показать дополнительный текст при нажатии на якорь, но только для этого самого экземпляра div, мой код jQuery в настоящее время удаляет скрытые во всех экземплярах div, я предполагаю, что решение будет заключаться в том, чтобы где-то добавить this. Благодаря!

Answer 1

Вам нужно пройти через DOM, чтобы найти .extra-text элемент, связанный с одним, который вызвал событие.

Для этого вы можете использовать ключевое слово this, которое будет ссылаться на элемент, который поднял событие click. Попробуйте это:

$(".show-more").click(function() { 
    $(this).closest('div').find(".extra-text").toggleClass("hidden"); 
}); 

Answer 2

Использование .prev() в этом контексте.

$(".show-more").click(function(e) { 
    e.preventDefault(); 
    $(this).prev().toggleClass("hidden"); 
}); 

Fiddle

Answer 3

.extra-text является двойниками к .show-more, поэтому вы можете использовать siblings() метод, чтобы получить смежный Sibling элемента

$(".show-more").click(function() { 
 
    $(this).siblings(".extra-text").toggleClass("hidden"); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <p>Text</p> 
 
    <p class="hidden extra-text">More text</p> 
 
    <a href="#" class="show-more">Show more..</a> 
 
</div> 
 
<div> 
 
    <p>Text</p> 
 
    <p class="hidden extra-text">More text</p> 
 
    <a href="#" class="show-more">Show more..</a> 
 
</div>