1

テキストエリアをクリックすると、ボタンがスライドダウンする機能があります。

ただし、ページに同じクラスの複数のテキストエリアがあり、問題は、テキストエリアのいずれかをクリックすると、それらすべてがボタンを下にスライドすることです。

クリックしたテキストエリア要素のみをスライドさせ、他の要素はスライドさせないようにするにはどうすればよいですか?

ここに私が作った簡単な 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();
  }
});
4

3 に答える 3

4

クリックされた要素に関連する要素を見つける必要があります。

$(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-19T21:21:49.817 に答える
1

クラス ルックアップに頼る代わりに、イベント ターゲットを使用してはどうでしょうか。

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

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

于 2013-07-19T21:23:31.833 に答える
0

次のスニペットは、すべてのボタン を選択します。

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

これを次のように置き換える必要があります。 

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

更新
これらの行でスクリプトを書き直します：

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

click利点は、対象となる 2 つの要素の同じ親でイベントを委任し、イベント ハンドラーに依存しないことです。

于 2013-07-19T21:23:09.680 に答える