javascript - 相同元素的相同功能

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

如何不依赖于类查找，而是使用事件目标：

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

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

Answer 3

以下代码段选择了所有按钮：

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

你应该用这个替换它：

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

更新
我会用这些行重写你的脚本：

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

优点是您将事件委托给两个目标元素的同一父级，并且您不依赖任何click事件处理程序。