避免为每个元素重复 JavaScript
Avoid repeating javascript for each element
本文关键字:JavaScript 元素 更新时间:2023-09-26
我在我的网站上使用谷歌对话框填充模态。 我需要在一个可以独立启动的页面上有多个模态。 现在,我唯一可以开始工作的方法是重复所有的javascript,这似乎完全没有效率:
<dialog id="dialog" name="modal">
<p>This is the login modal dialog.</p>
<input type="text"></input>
<p><button id="close-dialog">Close dialog</button></p>
</dialog>
<p><button id="open-dialog">Open login dialog</button></p>
<dialog id="dialog2" name="modal">
<p>This is the registration modal dialog.</p>
<input type="text"></input>
<p><button id="close-dialog2">Close dialog</button></p>
</dialog>
<p><button id="open-dialog2">Open registration dialog</button></p>
<script>
var dialog = document.getElementById('dialog');
var dialog2 = document.getElementById('dialog2');
dialogPolyfill.registerDialog(dialog);
dialogPolyfill.registerDialog(dialog2);
document.getElementById('open-dialog').addEventListener('click', function () {
dialog.showModal(); });
document.getElementById('close-dialog').addEventListener('click', function () {
dialog.close(); });
document.getElementById('open-dialog2').addEventListener('click', function () {
dialog2.showModal(); });
document.getElementById('close-dialog2').addEventListener('click', function () {
dialog2.close(); });
dialog.addEventListener('click', function (event) {
var rect = dialog.getBoundingClientRect();
var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
if (!isInDialog) {
dialog.close();
}
});
dialog2.addEventListener('click', function (event) {
var rect = dialog2.getBoundingClientRect();
var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
if (!isInDialog) {
dialog2.close();
}
});
</script>
我已经玩过这个并添加name
属性无济于事:
var names = document.getElementsByName("modal");
for (var i = 0; i < names.length; i++) {
names[i].onchange = function () {
document.getElementById('open-dialog').addEventListener('click', function () {
dialog.showModal();
});
document.getElementById('close-dialog').addEventListener('click', function () {
dialog.close();
});
}
}
我不明白类将如何解决这个问题。 有没有办法压缩代码,这样我就不需要为每个模式对话框重复它?
我编辑了你的小提琴:
http://jsfiddle.net/178f81qc/2/
这是你的意思吗?
.HTML
<div class="dialog-container">
<dialog>This is dialog one <button class="close">close</button></dialog>
<button class="open">open dialog one</button>
</div>
<br>
<div class="dialog-container">
<dialog>This is dialog two <button class="close">close</button></dialog>
<button class="open">open dialog two</button>
</div>
爪哇语
var dialogContainers = document.querySelectorAll('.dialog-container'), i;
for (i=0; i<dialogContainers.length; i++) {
var dialog = dialogContainers[i].querySelector('dialog'), // the <dialog> element
btnOpen = dialogContainers[i].querySelector('.open'), // the open button
btnClose = dialogContainers[i].querySelector('.close'); // the close button
// for old browsers
dialogPolyfill.registerDialog(dialogContainers[i]);
btnOpen.addEventListener('click', function () {
this.showModal();
}.bind(dialog));
// because you bind 'dialog' to the function, 'this' will be the dialog.
// (if you don't use bind, 'this' will be btnOpen instead)
btnClose.addEventListener('click', function () {
this.close();
}.bind(dialog));
}
我想通了。 我在对话框中添加一个类,以便我可以获取所有类;我可能只是按标签名称选择,但这只会将我锁定在模式对话框中。 然后我这样修改了我的脚本:
<script>
var els = document.getElementsByClassName("modal");
Array.prototype.forEach.call(els, function(el) {
var dialogid = el.id;
var dialog = document.getElementById(dialogid);
dialogPolyfill.registerDialog(dialog);
document.getElementById('open-'+dialogid).addEventListener('click', function () {
dialog.showModal();
});
document.getElementById('close-'+dialogid).addEventListener('click', function () {
dialog.close();
});
dialog.addEventListener('click', function (event) {
var rect = dialog.getBoundingClientRect();
var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
if (!isInDialog) {
dialog.close();
}
});
});
</script>
我真的不喜欢回答我自己的问题,但这奏效了。 如果有人能想出更有效的方法,我很乐意给他信任。
相关文章:
- 如何找到Javascript元素的最长边
- 如何通过它瞄准javascript元素's的onclick属性
- Javascript元素相对于屏幕的位置
- 找不到javascript元素
- JavaScript元素遍历返回的值超出预期
- 没有获得基础's的Javascript元素工作(与Laravel和Elixir)
- 为什么在ASP.NET Ajax更新面板中执行任何操作后javascript元素都停止工作
- 将 JavaScript 元素 ID 传递给 PHP 或 Form Variable
- Javascript元素相互阻塞
- CefSharp javascript元素点击不;不起作用,但手动点击它可以
- javascript元素.click()发布Safari
- Javascript元素更新侦听器
- Javascript 元素值的总和
- 在 php 代码中调用 javascript 元素
- If-Statement中的Javascript元素验证
- JavaScript 元素识别和检索
- 单击内部锚点/哈希时自动更新 JavaScript 元素
- 将 JavaScript 元素作为变量传递
- 按下表单重置按钮时删除 JavaScript 元素
- 将 javascript 保留在新的 JavaScript 元素中