[jQuery] - jak jedną funkcją, działać na wielu elementach?

Dla specjalistów Programowanie
#1

Mam taki kod jQuery:

$(document).ready(function(){
	$('.addFirstComment').click(function(){
		$('.firstCommentForm').toggle();
	});
});

No i to ładnie działa, z tym że gdy kliknę na ten element z .addFirstComment to zaczynają działać wszystkie te elementy i wyskakuje mi .firstCommentForm. Może pokaże zdj (przed kliknięciem):

4380868100_1386464766_thumb.jpg

No i po kliknięciu w obojętnie jaki link:

6929410000_1386464801_thumb.jpg

 

Chcę, że gdy np kliknę w ten link to pojawi mi się pod nim formularz, a nie pod wszystkimi, które mają taką samą klasę. Pomoże ktoś ?

 

Pozdrawiam

#2

Zamień drugi z selektorów na this, dajesz mu children / parent / next ew coś innego (np css’owy selektor). Ale bez html nie da rady ci tego wywróżyć.

#3 
$(document).ready(function(){
    $('.addFirstComment').click(function(){
        $(this).closest('.firstCommentForm').toggle();
    });
});

Spróbuj, ale to może nie działać.

 

Zależy jaki masz DOM, teoretycznie powienieneś się odnieść do rodzica/rodziców elementu którego klikasz a następnie w nich odszukać to pole na komentarz i wywołać na niej daną akcję.

 

 

Drugie rozwiązanie jaki mam pomysł to spięcie atrybutem przycisku który klikasz i elementu który będziesz wyświetlał

 

taki pseudokod

<button commentId = "1"></button>
<textarea commentId = "1"></textarea>
<button commentId = "2"></button>
<textarea commentId = "2"></textarea>

$(document).on('click', 'button', function(){
$('textarea').find('[commentId="'+$(this).attr('commentId')+'"]').toggle();
});

Nie testowałem, czysta teoria

 

 

Na pewno powinno działać takie rozwiązanie, kombinuj tylko z wartością w funkcji eq(), im dasz mniej a będzie działać, tym będzie wydajniej.

$(document).ready(function(){
    $('.addFirstComment').click(function(){
        $(this).parents().eq(3).find('.firstCommentForm').toggle();
    });
});
#4 
$(document).ready(function(){
    $('.addFirstComment').click(function(){
        $(this).parents().eq(3).find('.firstCommentForm').toggle();
    });
});

Nie działa. Tzn działa tak jak to:

$(document).ready(function(){
	$('.addFirstComment').click(function(){
		$('.firstCommentForm').toggle();
	});
});
#5

Zrób tak jak napisałem w pierwszym poście. Albo daj html lub na więcej postów nie licz.

$(document).ready(function(){
	$('.addFirstComment').click(function(){
		$(this).children('.firstCommentForm').toggle();
	});
});

Dla html o składni:

<div class="addFirstComment">trolololo
    <div class="firstCommentForm">cotamcotam</div>
  </div>
#6

Teraz działa, ale w HTML miałem tak:

<span class="addFirstComment">trolololo<span>
<div class="firstCommentForm">cotamcotam</div>

I myślę, że to byłoby lepsze, ale jak się nie da to już zrobię tak jak napisałeś.

 

UP: Do kitu, bo jak w tym _firstCommentForm _kliknę w jakiegoś inputa, to cały form znika ;/

#7

Jeśli chcesz mieć w środku forma można zrobić tak:

$(document).ready(function(){
  $('.firstCommentForm').click(function(){return false;});
  $('.addFirstComment').click(function(){
$(this).children('.firstCommentForm').toggle();
});
});

A co do twojego html’a, zacznijmy od tego że źle zamknąłeś spany, założyłem że span na końcu zamyka sekcję.

$(document).ready(function(){
  $('span.addFirstComment').click(function(){
		$(this).next('.firstCommentForm').toggle();
	});
});
#8

nadal nie działa ;/ Da się to w ogóle jakoś zrealizować ?

#9

http://jsbin.com/ukOYefO/2/edit

#10

Może tak być, że u Ciebie działa, a u mnie nie ?

#11

Na jakiej przeglądarce ci nie działa ? Masz włączoną obsługę js i dodany jquery min ? Jeśli mój kod działa a twój nie to masz gdzieś błąd / dałeś złą strukture kodu. Wróżbitą nie jestem.