Question

我正在尝试使用jQuery脚本显示模式对话框。使用$方法获取元素并调用函数会导致错误，但是使用香草JS获取元素并调用函数会按预期工作。如何使用$方法获取元素？

香草JavaScript

按预期工作。 Chrome v67.0.3396.87没有错误。

document.getElementById("error").showModal()

<dialog id="error">Error message</dialog>

jQuery（v3.3.1）

无法正常工作。在同一浏览器上返回错误。

未捕获的TypeError：$（...）。showModal不是函数

$('#error').showModal();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dialog id="error">Error message</dialog>

我意识到dialog.showModal()功能可能仍在试验中，因此jQuery可能尚未对此提供正式支持。但是，我希望jQuery未覆盖的任何函数或属性都可以级联到原始的JavaScript函数和属性。显然不是这样，因此我可以使用一些帮助使$（'＃dialog'）。showModal（）的功能类似于document.getElementById（“ dialog”）。showModal（）。

编辑：我正在尝试像在脚本中使用任何其他典型的jQuery调用一样使用它。有关更多背景信息，这是我尝试使用电话的方式。

err = $('#error');

err.html('New error message'); //err = $('#error')[0] results in an error here
err.showModal(); //err = $('#error') results in an error here

//err.show() does not create the supporting elements that showModal() does

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dialog id="error">error</dialog>

Answer 1

修改showModal（）调用符合我的要求：

$.fn.showModal = function() {
    el = $(this);
    if (el.is('dialog')) {
        el[0].showModal();
    }
    return el;
};

err = $('#error');
err.html('New error message');
err.showModal();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dialog id="error">error</dialog>

在某些时候，我需要添加浏览器兼容性检查，以级联到某些降级模式替代方案。还需要添加jQuery版本号检查，以防在以后的版本中添加对调用的正式支持。

Answer 2

扩展jQuery

jQuery.fn.extend({showModal: function() {
        return this.each(function() {
           if(this.tagName=== "DIALOG"){
                this.showModal();
            }
        });
 }});

用作

$('#error').showModal();

如何修改jQuery以允许$（'dialog'）。showModal（）工作？

2 个答案: