如何访问 jquery 对话框引用的 div 元素？

Question

我有一段 javascript 创建对话框的代码，看起来像这样：

 $( function () {
    $('.hoverList').dialog({
    autoOpen: false,
    hide: {
        effect: "fade",
        duration: 400
    },
    title: $(this).data("title"),
    modal: false
});};

在这种情况下，页面上可能有多个 hoverlist class 元素。我遇到的问题是上面的这一行：

title: $(this).data("title")

在我的页面上，包含我的对话框的 div 如下所示：

<div class='hoverlist' data-title='My Dialog Title'>...</div>

当 javascript 运行时，对话框的 'title:' 键中返回的 $(this) 指的是文档本身，而不是该对话框指令适用的元素，因此数据<div> 元素的 ("title") 无法在此处访问。

请注意，同一页面上可能有多个悬停列表，因此我不能只通过 id select 而不是 class 而不重复重新创建相同的代码。试图弄清楚如何使用 <div> 的数据元素中引用的标题构建对话框，我将其转换为对话框。这怎么可能？

Answer 1

如果要这样做，则需要遍历 jQuery 选择器对象，以便“$(this)”指向当前节点。

$( function () {

    $('.hoverList').each(function(){
        $(this).dialog({
            autoOpen: false,
            hide: {
                effect: "fade",
                duration: 400
            },
            title: $(this).data("title"),
            modal: false
        });
    });
});

如何访问 jquery 对话框引用的 div 元素？

How to get access the div element referred to by a jquery dialog?

javascript

jquery

jquery-ui-dialog