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

Question

我有一些 javascript 代码，它创建了一个对话框，看起来像这样:

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

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

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

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

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

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

请注意，同一页面上可能有多个悬停列表，因此我不能仅通过 id 而不是类来选择它，而无需重复重新创建相同的代码。试图弄清楚如何构建具有 <div> 数据元素中引用的标题的对话框。我正在把它变成一个对话框。这怎么可能？

Answer 1

如果您想这样做，那么您需要循环遍历 jQuery 选择器对象，以便“$(this)”引用当前节点。

$( function () {

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