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();
    }
});