通过名称创建后引用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添加元素？

回答

相关问题