作成後、名前でjquery要素を追加しましたか？

Question

要素を参照してDOMに追加するjQueryオブジェクトをいくつか作成しています。私は名前でそれらを参照できるようにしたいので、セレクタを束ねてセレクタを使用する必要はありません。ここでは、コードのダウン易しく書き直さ例 です：

<div class="body> 

</div> 

$(document).ready(function(){ 
     wrapper = $("<div />") 
      .addClass("wrapper") 
      .click(function(e){ 
       if (e.target === this) 
        $(this).hide(); 
      }) 
      $('.body').wrap(wrapper); 

     close = $("<button />") 
      .addClass("close") 
      .text('CLICK TO CLOSE') 
      .click(function(e){ 
       ///HIDE ".wrapper" FROM HERE 
       $(wrapper).hide(); 
       ///HIDE ".wrapper" FROM HERE 
      }) 
      .prependTo($('.body')); 
}) 

JSFiddle Here

私は、「閉じる」ボタンをクリックすると、「ラッパー」を隠すことができるようにしたいです。私はを使用してそれを隠すことができましたが、複数のラッパーが存在することになります。ただ1つをターゲットにする必要があります。私は$(this).closest('.wrapper').hide()を使うことができましたが、今は面倒です。余分なコードをすべて避けるために "close"内から "wrapper"変数を参照する方法はありますか？

Answer 1

問題がクリック機能の範囲ではないことが判明しました。これはwrap（）関数の仕組みでした。 jQuery .Wrap（）を使用すると、指定された要素の周りの構造体のコピーがラップされ、元のものがセットとして返されます。この場合、私の場合は参照が失われています。だから.bodyをラップするのではなく、単に本体が '.replaceWith'を使用しているラッパーを追加し、その本体に（基本的には.wrap（）しかし自分の方法で）追加しました。これにより、私はラッパーを隠すことができました。

wrapper.hide() 

非常にきれいです。

全コード：

$(document).ready(function(){ 
     $body = $('.body'); 
     wrapper = $("<div />") 
       .addClass("wrapper") 
       .click(function(e){ 
        if (e.target === this) 
         $(this).hide(); 
       }) 
       $body.replaceWith(wrapper) 
       wrapper.append($body); 

     close = $("<button />") 
       .addClass("close") 
       .text('CLICK TO CLOSE') 
       .click(function(e){ 
        wrapper.hide(); 
       }) 
       .prependTo($('.body')); 
}) 

ワーキングフィドル：https://jsfiddle.net/1s9o198a/

Answer 2

ラッパーの変数を作成するときに問題があるのは、依然としてjQuery objectです。それで、割り当てと同時にラップを行います。実際にはDOM内の何かになり、隠すことができます。

thisフィドルを参照してください。

(function ($) { 
    "use strict"; 
    $(document).ready(function() { 
     var wrapper = $(".body").wrap($("<div></div>") 
      .addClass("wrapper") 
      .click(function (e) { 
       if (e.target === this) { 
        $(this).hide(); 
       } 
      })); 

     $("<button></button>") 
      .addClass("close") 
      .text("CLICK TO CLOSE") 
      .click(function() { 
       $(wrapper.parent(".wrapper")).hide(); 
      }) 
      .prependTo($(".body")); 
    }); 
}(jQuery)); 

スクリプトのこのバージョンは、thisを可能にする例外でJSLintを渡します。