Как сделать, чтобы JS срабатывал только для одного из блоков с одинаковым классом?

Question

[pashabomber]

Добрый день!

На странице идут несколько одинаковых блоков:

<a href="#" class="add">+ Добавить блюдо</a>
<div class="add-form hide">
	<input type="text" placeholder="Поиск среди блюд" id="tags">
	<input type="submit" value="Добавить"> <span class="create-form-reset">Нет</span>
</div>

По умолчанию форма скрыта (класс hide).
И есть JS, который по клику на ссылку с классом add форму показывает, а по клику на create-form-reset снова форму скрывает

$(document).ready(function(){
	$('.add').click(function() {
		$('.add-form').removeClass('hide');
	});
	$('.create-form-reset').click(function() {
		$('.add-form').addClass('hide');
	});
});

Проблема в том, что при нажатии на одну из ссылок с классом add показываются все скрытые формы. Как сделать, чтобы показывалась только одна, которая идет после ссылки add?

Заранее спасибо!

Answer 1

[Алексей Уколов]

Решение вашей задачи находится здесь.

Comments

[pashabomber]

$('.add').click(function() {
$(this).next(".add-form").removeClass('hide');
});

попробовал так, не срабатывает

[Алексей Уколов]

Все прекрасно работает jsfiddle.net/koceg/b88afyeo

[pashabomber]

Алексей Уколов: и правда. спасибо!

[pashabomber]

Алексей Уколов:
$('.create-form-reset').click(function() {
$('.add-form').addClass('hide');

а с этой частью как быть? пробовал по аналогии .prev - не получается. заранее спасибо!

[Алексей Уколов]

Проговорите для себя словами, что должно произойти при клике на reset. А потом напишите это при помощи jQ (api.jquery.com/category/traversing/tree-traversal/)

Answer 2

[Дмитрий Ковальский]

можно использовать .next(). Можно навешать data-атрибутов для точной идентификации , которую форму открывать.