Animacja elementu w jQuery

0

Hej,
mam pewien mały problem :) Dopiero uczę się javascript i nie mogę odnieść się do konkretnego elementu, ale łatwiej będzie mi to pokazać poprzez kod:

HTML:

<li> 
<div class="content">
    <div class="calendar"> 
		 **<div class="odpowiedz-na-opinie">
			<img src="static/img/odpowiedz.png" alt="">
			<p>Odpowiedz</p> 
		</div>**
    </div> 
</div>
						  
**<div class="app-opinie-answer answer-add">**
	<div class="app-opinion-answer " style="position:relative;">
	     <div class="answer-add-input">
		<input type="text" placeholder="Wprowadź tekst i zatwierdź ENTEREM" name="opinia_odpowiedz" />
	    </div>
       </div>
</div>
</li> 


<li> 
<div class="content">
    <div class="calendar"> 
		 **<div class="odpowiedz-na-opinie">
			<img src="static/img/odpowiedz.png" alt="">
			<p>Odpowiedz</p> 
		</div>**
    </div> 
</div>
						  
**<div class="app-opinie-answer answer-add">**
	<div class="app-opinion-answer " style="position:relative;">
	     <div class="answer-add-input">
		<input type="text" placeholder="Wprowadź tekst i zatwierdź ENTEREM" name="opinia_odpowiedz" />
	    </div>
       </div>
</div>
</li>

a to kawałek JAVASCRIPT

 $(function() {
            $('.odpowiedz-na-opinie').click(function() {
              $('.answer-add').slideToggle('slow');
             
            });

        });

Kod działa w ten sposób, że wszystkie divy .answer-add pod każdą opinią zaczynają się pojawiać, a chciałbym żeby pojawiał się tylko najbliższy.
Próbowałem z next(), ale nie udało mi się.
Może ktoś będzie w stanie mi podpowiedzieć co zmienić.

0

Używaj

  1. this, co wskaże kliknięty element (this jest "gołym" obiektem z DOM, więc użyj $(this), żeby korzystać na tym z funkcji z jQuery)
  2. tych funkcji: https://api.jquery.com/category/traversing/tree-traversal/

Edit: Przeczytaj sobie na co next() wskazuje i pomyśl dlaczego to nie działa u Ciebie ;)

0

Powinienem wskazać rodzica elementu $this, a następnie kolejnego diva z tego samego poziomu, który ma się pojawić poprzez toggleSlide, czy
dobrze rozumiem ? Czy jest krótsza droga :)

1

Closest: https://api.jquery.com/closest/

$('.odpowiedz-na-opinie').on('click', function(){
       $(this).closest('.content').next().slideToggle('slow');
});

1 użytkowników online, w tym zalogowanych: 0, gości: 1