Javascript 如何在jQuery对象中保留对另一个jQuery对象的引用？

我正在为自己编写一个简单的

jQuery

插件，它：

创建一个背景

div

（用于阻塞目的，如

模式对话框

）。（用

backDiv

引用）

显示了这一背景

显示

$（此）

单击背景时，删除背景并隐藏

$（此）

除了第四个，我可以做所有这些：因为我无法保存对后台

div

的引用，所以我无法将其取回并删除

我尝试了

$（this）.data（'backDiv'，backDiv）

和

$（this）[0]

我知道有各种插件可以实现这一点，包括jQuery自己的对话框功能，但我想创建自己的版本

我不能全局保留这个变量，因此，如果可能的话，我如何在jQuery对象（或DOM对象）中保留对
backDiv
的引用

更新：我允许这些元素中的多个相互重叠显示：
嵌套模式对话框

更新-2：
（函数（$）{
$.fn.showmodel=函数（）{
var backDiv=$（'This is backDiv'）；
$（this）.data（'backDiv'，backDiv）；
$（'body'）.append（backDiv）；
//TODO:bringToFront（后俯仰）；
$（this.show（）；
//TODO:bringToFront（$（本）；
var thisRef=$（此）；
backDiv.click（函数（）{
thisRef.closeModal（）；
});
返回美元（此）；
};
$.fn.closeModal=函数（）{
//问题（null）：var backDiv=$（this.data（'backDiv'）；
//backDiv.remove（）；
$（this.data（'backDiv'，''）；
$（this.hide（）；
}
}（jQuery））；
$（文档）.ready（函数（）{
$（'a'）.showmodel（）；
})；
要使用JQuery检索数据属性值，请使用以下代码

语法
例子
我建议您使用复杂的dom对象，类似于角度指令，基本上，您必须使用dom中表示为对象组的组件

所以，按照我说的，你的模态组件应该是这样的：


var Modal=（函数（$）{
var tpl=“”；
功能模态（容器）{
var self=这个；
this.container=$（container | |'body'）；
this.tpl=$（tpl）.appendTo（this.container）；
this.content=$（'.modal content'，this.tpl）；
this.background=$（'.modal background'，this.tpl）；
this.isOpened=false；
此.ANIMATION_DURATION=500；
点击（函数（e）{self.toggle（e）}）；
}
Modal.prototype.show=功能（cb）{
var self=这个；
cb=$.isFunction（cb）？cb:$.noop；
this.tpl.fadeIn（this.ANIMATION\u DURATION，function（））{
self.isOpened=true；
cb（）；
});
归还这个；
};
Modal.prototype.hide=函数（cb）{
var self=这个；
cb=$.isFunction（cb）？cb:$.noop；
this.tpl.fadeOut（this.ANIMATION\u DURATION，function（））{
self.isOpened=false；
cb（）；
});
归还这个；
};
Modal.prototype.toggle=函数（）{
如果（此.isOpened）{
返回这个。hide（）；
}
返回这个。show（）；
};
Modal.prototype.setContent=函数（内容）{
this.content.html（$（''）.append（content.html（））；
归还这个；
};
返回模式；
})（window.jQuery）；
函数ExampleCtrl（$）{
var modal=新模态（）；
modal.setContent（'helloworld'）；
$（“#测试”）。单击（函数（）{
modal.show（）；
});
}
window.jQuery（document）.ready（ExampleCtrl）；
.modal{
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
}
.模态.模态背景{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：rgba（0,0,0,8）；
}
.模态.模态内容{
宽度：300px；
高度：150像素；
背景：#fff；
边框：1px纯黄色；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-150px；
利润上限：-75px；
线高：150px；
文本对齐：居中；
}
h1{
线高：100px；
}

测试模态
将
数据backDiv=“
添加到动态模态div中

更改如下

var backDiv = $('<div data-backDiv="" style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');

var backDiv=$（'This is backDiv'）；
使用
类/id选择器
？共享您的插件代码-
$（此）.data（'backDiv'，backDiv）；
应该可以工作，然后
var backDiv=$（此）.data（'backDiv'））
你能做一把小提琴来更好地理解吗？我相信Rayon Dabre的答案是最简单的。否则引用也可以存储在变量中供以后使用，我在这里添加了代码，
$（this）。data（'backDiv'）
返回null我添加了代码，不幸的是
$（this）。data（'backDiv'）
返回Null请确保在访问数据之前必须分配数据。否则返回Null因为这是我问题的直接解决方案，我选择了这个答案。因此，对于动态div，数据变量似乎已经存在。如果不存在，请分享您的经验。这是一篇非常有价值的帖子，它给了我新的想法，非常感谢！我之所以选择此选项，并不是因为它不是我问题的“直接”解决方案。一般来说，没有问题，我更喜欢以尽可能更好的方式做事：）我同意你的看法，即此总体解决方案看起来更干净、更具可扩展性。
1. $(this).data('backDiv'); // use to retrive value    or
2. var temp=$(this).data('backDiv'); // use to retrive value and assign into variable

var backDiv = $('<div data-backDiv="" style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');