такая же функция для одних и тех же элементов

Question

У меня есть функция, которая, когда вы нажимаете в текстовом поле, будет скользить вниз по кнопке.

Тем не менее, у меня есть несколько текстовых полей на странице с тем же классом, и проблема в том, что если вы нажмете на любой из текстовых областей, все из них сдвинутся вниз по кнопке.

Как я могу сделать это так, чтобы он скользил только по элементу textarea, на который вы нажимаете, а не на других?

Вот быстрый JSFiddle я сделал: http://jsfiddle.net/MgcDU/6100/

HTML:

<div class="container"> 
    <div class="well"> 
    <textarea style="width:462px" placeholder="Comment..."></textarea> 
    <button class="btn btn-primary btn-toggle" type="button">Post</button> 

    <div class="clearfix"></div> 
    </div> 
</div> 

<div class="container"> 
    <div class="well"> 
    <textarea style="width:462px" placeholder="Comment..."></textarea> 
    <button class="btn btn-primary btn-toggle" type="button">Post</button> 

    <div class="clearfix"></div> 
    </div> 
</div> 

JavaScript:

$("textarea").click(function(){ 
    $(".btn-toggle").slideDown(); 
}); 

$(document).click(function(e){ 
    e.stopPropagation(); 
    if($(e.target).parents(".well").length == 0){ 
    $(".btn-toggle").slideUp(); 
    } 
}); 

Answer 1

должны найти элементы по отношению к элементу, который кликнули.

$(this) - это элемент, который был нажат, и siblings() находит элементы, которые являются братьями и сестрами.

http://jsfiddle.net/P9nMq/

$("textarea").click(function(){ 
    $(this).siblings('.btn-toggle').slideDown(); 
}); 

$(document).click(function(e){ 
    e.stopPropagation(); 
    if($(e.target).parents(".well").length == 0){ 
     $(this).find('.btn-toggle').slideUp(); 
    } 
}); 

Answer 2

Следующий фрагмент кода выбирает все кнопки:

$(".btn-toggle").slideUp(); 

Вы должны заменить его с этим:

$(this).siblings(".btn-toggle").slideUp(); 

Update
Я бы переписать сценарий с этими строками:

$(".well").('focus blur', "textarea", function(e){ 
    $(this) 
     .siblings(".btn-toggle") 
      .stop(true, true) 
      .slideToggle(); 
}); 

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

Answer 3

Как насчет вместо того, чтобы полагаться на класс поиска, используйте цели события:

$("textarea").click(function(evtTarget){ 
    $(evtTarget.target).parent().find($(".btn-toggle")).slideDown(); 
}); 

http://jsfiddle.net/paulprogrammer/MgcDU/6103/