相同功能的相同功能

我有一个函数，当你点击一个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(); 
    } 
});

来源

2013-07-19 Erik Fischer

不得不寻找与被点击的元素中的元素。

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

来源

2013-07-19 21:21:49

完美。谢谢，这非常快。当我可以（12分钟）时，我会将您的答复标记为已解决。 –

很高兴我能帮到你。 –

下面的代码片段选择所有的按钮：

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

你应该用这种替代它：

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

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

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

的好处是，你委托对两个有针对性的元素相同的父的事件，并且不依赖于任何click事件处理程序。

来源

2013-07-19 21:23:09

怎么样，而不是依靠一类的查找，使用活动对象：

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

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

来源

2013-07-19 21:23:31 PaulProgrammer

相同功能的相同功能

回答

相关问题