通過名稱創建後引用jquery添加元素？

我創建了幾個引用元素並將它們附加到DOM的jQuery對象。我希望能夠通過名稱引用它們，以便我不必使用一堆選擇器將事件與它們綁定。這裏是一個簡單化示例代碼的：通過名稱創建後引用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

我希望能夠點擊「關閉」按鈕，隱藏「包裝」。我可以使用來隱藏它，但是會有多個包裝，它只需要針對一個包裝。我可以使用$(this).closest('.wrapper').hide()，但現在它變得混亂。有沒有辦法從「關閉」中引用「包裝器」變量以避免所有額外的代碼？

來源

2016-07-07 DasBeasto

什麼是理想的結構？ '.wrapper'是最外層的容器嗎？每個'.wrapper'元素都包含它自己的'.body'嗎？ '.close'是'.body'的孩子還是兄弟？ – showdev

是的dom結構.wrapper是外部然後.body然後在內部是.close（它們是最後的模式，這只是簡單的版本）。在代碼中，而不是在DOM準備中，這是在一個初始化函數中調用的，所以代碼每「模態」調用一次，但我想我是否可以解決它，我可以將它應用於所有。如果你認爲這一切都是必需的，將會更新。 – DasBeasto

我發現問題不在click函數的範圍內，而是wrap（）函數的工作方式。當你使用jQuery .Wrap（）時，它將指定元素周圍的結構副本包裝起來，並將原始數據作爲一個集合返回，這在我的情況下正在失去它的引用。因此，而不是包裹體。我簡單地將包裝體附加到身體正在使用'.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/

來源

2016-07-10 22:54:19 DasBeasto

問題是，當你爲包裝器創建一個變量時，它仍然是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));

此版本的劇本經過JSLint與允許this除外。

來源

2016-07-07 00:52:40 Jonathan

這是非常接近，我很欣賞它，但我可能措辭不佳，我需要關閉按鈕隱藏黑色包裝（因此它的一切）不只是紅色的「身體」。對不起，我很困惑，但很有幫助 – DasBeasto

'$（wrapper.parent（「。wrapper」））。hide（）;'then？請參閱https://jsfiddle.net/zkegxyco/ – Jonathan

這是一個可能，它的作品，它只是一個我認爲更混亂。但是，如果沒有人有更好的解決方案可能。 – DasBeasto

通過名稱創建後引用jquery添加元素？

回答

相關問題