使用多个选择器创建jquery小部件

我已经创建了一个简单的背景阻止小部件，它将创建一个着色div来阻止除所需元素之外的所有内容。我从另一个小部件创建了一个实例，如下所示：

// this.element is a jquery object
this.blocker = this.element.blocker();

这将添加一个“backgroundblockingdiv”，通过改变z索引，我将This.element保留在顶部。这很好，但我现在需要在顶部保留两个元素。是否可以创建具有多个元素的小部件的单个实例？我可以使用add函数或作为选项添加其他元素，但不知道是否有更好的方法

这把小提琴展示了它目前的工作原理。我还想引用#unblocked2。（我知道代码的其余部分还不能处理多个元素）

编辑

---

由于我误读了自己的代码，这将为每个被阻止的元素实例化一个阻止程序，因此我提出了另一个解决方案，它接受选择器作为选项，从而允许创建一次小部件，并提出与选择器匹配的元素。根据上述情况，JS部分仅做了以下更改：

JS:

<div><input type="text" value="blocked"></div>
<div class="unblocked" id="unblocked1"><input type="text" value="unblocked"></div>
<div><input type="text" value="blocked"></div>
<div class="unblocked" id="unblocked2"><input type="text" value="unblocked"></div>
<div><input type="text" value="blocked"></div>

<input type="button" id="btnBlock" value="Block">

(function ($) {
    $.widget('my.blocker', {

        _create: function() {
            this.$blocker = $('<div/>', {
                css: {
                    backgroundColor: '#000000',
                    opacity: 0.4,
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    zIndex: 99,
                }
            });

            // this.element will refer to unblocked1
            // I want to access unblocked2 aswell

            this.originalZIndex = this.element.css('z-index');
            this.element.css('z-index', 100);
            this.$blocker.appendTo($('body'));
            return this._super();
        }
    });

    $('#btnBlock').click(function() {
        var anElement = $('.unblocked');
        anElement.blocker();
    });

})(jQuery);

（函数（$）{
$.widget（'my.blocker'{
_创建：函数（）{
此.$blocker=$（''{
css:{
背景颜色：'#000000'，
不透明度：0.4，
位置：'固定'，
排名：0，
底部：0，
左:0,，
右:0,，
zIndex:99，
}
});
//此.element将引用unblocked1
//我还想访问unbucked2
this.originalZIndex=this.element.css（'z-index'）；
css（'z-index'，100）；
这个.blocker.appendTo（$（'body'）；
把这个还给我；
}
});
$（'#btnBlock'）。单击（函数（）{
var anElement=$（'.unblocked'）；
一个元素。阻滞剂（）；
});
})（jQuery）；

我理解您所做的，但这已经对每个元素应用了“blocker”，因此现在有两个blocker div。我希望有一个拦截器，它引用多个元素，这样每个元素都不会被阻止。哦，我明白了。然后，您应该使用整个包含元素作为小部件的选择器（或者可能是整个

文档

），并将所有其他元素作为参数传递给小部件。我会编辑我的answer@Goose完成后，再次查看答案。现在只为整个元素组创建了一个小部件。我曾想过类似的事情，但您实现它的方式非常完美。非常感谢。

(function ($) {
    $.widget('my.blocker', {

        _create: function() {
            this.$blocker = $('<div/>', {
                css: {
                    backgroundColor: '#000000',
                    opacity: 0.4,
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    zIndex: 99,
                }
            });

            // this.element will refer to unblocked1
            // I want to access unblocked2 aswell

            this.originalZIndex = this.element.css('z-index');
            this.element.css('z-index', 100);
            this.$blocker.appendTo($('body'));
            return this._super();
        }
    });

    $('#btnBlock').click(function() {
        var anElement = $('.unblocked');
        anElement.blocker();
    });

})(jQuery);