Question

假设以下标记

<div class="popup" data-title="Popup dialog title 1" data-modal="1" >
    ...
</div>
<div class="popup" data-title="Popup dialog title 2">
    ...
</div>

以及以下javascript：

$(".popup").dialog({
    title: '????', // Should be the value of the element's data-title attribute
    modal: ???, // Should be true if the element has a data-modal attribute
    ... etc, other options ...
});

我想将对话框标题设置为弹出元素上“data-title”属性的值，并根据“data-modal”属性的存在设置模式。如何获得元素的引用 - 即我可以替换什么？????用在上面的脚本？第一个div应该得到标题“弹出对话框标题1”和第二个“弹出对话框标题2”。第一个div应该是模态弹出，第二个无模式

已更新

迄今为止的答案已经解决了具体的例子，但问题的目的是更为笼统，尽管我不确定如何制定更一般的问题。基本上我希望能够在使用jQuery将行为附加到相关元素时访问相关元素的属性。

我已将示例更新为更一般。

我怀疑答案可能涉及调用$(".popup").each并将对话框附加到每个元素内部的元素，但作为jQuery初学者，我不确定最常用的方法。

更新2

我已使用.each实现此功能，如下例所示。

$(".popup").each(function() {
    var title = $(this).data('title');
    var modal = ($(this).data('modal') != null);
    $(this).dialog({
        title: title,
        modal: modal,
        ... etc ...
    });
});

我很想知道这是否是达到我想要的最惯用/优雅的方式。

Answer 1

var $popup = $("#popup");
$popup.dialog({
    title: $popup.data('title'), // Or $popup.attr('data-title')
    modal:true,
    ... etc, other options ...
});

如果指定title（不带data - 前缀），标题将自动用作对话框的标题。从语义上讲，它也是正确的，因为title属性描述了元素的标题：

<div id="popup" title="Popup dialog title">

$("#popup").dialog({
    modal: true,
    ... etc, other options ...
});

Answer 2

如果我正确理解了问题的一般性，那么选择器（你的'.popUp'）选择多个DOM元素。

以下是fiddle，其中列出了一些可以执行此操作的方法。

使用$ .each

我们检查每个项目并检查模态是否为1。请注意，item不是Jquery对象，您需要在使用jquery函数之前将其包装。

   $('div.each').each(function(index, item) {
        if ($(item).data('modal') == 1) {
            $(item).dialog({
                title :$(this).data('title'),
                position:'top'
            });
        }
    });

使用$ .filter

我在filter返回的整个集合上调用dialog()返回一个包含的元素集合，它满足函数的布尔条件。这里的项目也是一个DOM元素，需要在你之前进行包装。

    $('div.filter').filter(function(index, item) {
        return $(item).data('modal') == 1
    }).dialog({
        create: function(event, ui) {
            $(this).dialog("option", "title", $(this).data('title'));
        },
        position:'bottom'
    });

我希望我能正确理解问题的本质。对话框的标题可以设置为每个脚本中显示的多种方式......（但我想这只是问题的附录而不是实际问题本身）

Answer 3

下面应该做的，

$("#popup").dialog({
    title: $("#popup").attr('data-title'),
    modal:true,
    ... etc, other options ...
});

修改：请在此处查看DEMO。

您可以访问任何对话事件中的特定对话框。 Dialog Events 所有这些事件都是使用this上下文执行的，因此可以访问包含标题和按钮的对话框内容及其父级。

对于Ex：您可以在create function中设置标题，以便可以访问对话框的this元素。见下文，

$( ".dialog" ).dialog({
  create: function(event, ui) {
    var $this = $(this);
    $this.parent().find('.ui-dialog-title').html($this.attr('data-title'));
}});

下面是jQuery对话框结构。为了便于阅读，我删除了不必要的类和其他东西。 div＃our-dialog是实际的对话框内容。在这些活动中，您可以访问标题或按钮。

另见jquery dialog save cancel button styling

<div class="ui-dialog">
   <div class="ui-dialog-titlebar">
     <span class="ui-dialog-title">
        Dialog Title
     </span>
     <a href="#" class="ui-dialog-titlebar-close" >
        <span class="ui-icon-closethick">close</span>
     </a>
   </div>
   <div id="our-dialog" data-title="Basic dialog 3" class="ui-dialog-content" >
      <p>Dialog Content </p>
   </div>
   <div class="ui-dialog-buttonpane">
     <div class="ui-dialog-buttonset">
       <button type="button" class="ui-button" >
         <span class="ui-button-text">Ok</span>
       </button>
     </div>
   </div>
</div>

在jquery-ui对话框函数中获取对元素的引用

3 个答案:

使用$ .each

使用$ .filter