Animacja elementu w jQuery

Animacja elementu w jQuery
S9
  • Rejestracja:prawie 10 lat
  • Ostatnio:prawie 4 lata
  • Postów:70
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:

Kopiuj
<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

Kopiuj
 $(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ć.

edytowany 2x, ostatnio: szewa90
dzek69
Zapoznaj się z działaniem forum, używaj tagów kolorujących składnię. Popraw proszę post.
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
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 ;)


edytowany 2x, ostatnio: dzek69
S9
  • Rejestracja:prawie 10 lat
  • Ostatnio:prawie 4 lata
  • Postów:70
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 :)

edytowany 1x, ostatnio: szewa90
Tumeg
  • Rejestracja:około 11 lat
  • Ostatnio:ponad 8 lat
  • Postów:687
1

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

Kopiuj
$('.odpowiedz-na-opinie').on('click', function(){
       $(this).closest('.content').next().slideToggle('slow');
});
edytowany 2x, ostatnio: Tumeg
S9
dzięki wielkie ! nie spodziewałem się gotowego rozwiązania, zaoszczędziłem dzięki Tobie troche czasu :)

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.