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

我希望能够点击“关闭”按钮并隐藏“包装”。我可以使用$('.wrapper').hide()来隐藏它，但是会有多个包装器，它需要仅针对一个包装器。我可以使用$(this).closest('.wrapper').hide()，但现在它变得混乱了。有没有办法从“关闭”中引用“包装”变量以避免所有额外的代码？

Answer 1

问题是当你为包装器创建一个变量时，它仍然是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。

除外

Answer 2

我发现问题不在于click函数的范围，而是wrap（）函数的工作方式。当你使用jQuery .Wrap（）时，它会在指定的元素周围包装一个结构的副本，并将原始文件作为一个集合返回，在我的例子中它正在丢失它的引用。所以我没有包装.body，而是简单地将包装器附加到身体正在使用的地方。＆＃39; .replaceWith＆＃39;并将身体附加到那个（基本上是.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/

按名称创建后引用jquery附加元素？

2 个答案: