Question

我有一个功能，当你点击一个textarea时，它会滑下一个按钮。

但是，我在页面上有多个textareas具有相同的类，问题是如果你点击任何textareas，所有将滑下按钮。

我怎样才能使它只滑动你点击的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事件处理程序。

相同元素的相同功能

3 个答案: