将jQuery UI对话框应用于类

debugcn 发表于 Dev

deltaskelta

使此示例与类一起使用时遇到一些麻烦。我希望每个类在单击时都会弹出一个单独的对话框，其中包含不同的信息... https://jqueryui.com/dialog/#animated

这是我的小提琴和代码。

HTML ...

<div class="foo">click me
  <div class="bar">blahblahblah</div>
</div>

<div class="foo">or me
  <div class="bar">blahblahblah</div>
</div>

jQuery的...

$( function() {
    $( ".bar" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( ".foo" ).click(function() {
      $(this).find(".bar").dialog( "open" );
    });
});

卡尔提凯扬·韦迪

您可能无法使用通过类打开对话框的jquery UI Dialog作为代码中的方式，因为$(this).find(".bar")它将返回空并且不存在。

尝试对内部div元素使用id。

<div class="foo" data-id="x1" >click me
  <div class="bar" id="x1" >blahblahblah X1</div>
</div>

<div class="foo" data-id="x2" >or me
  <div class="bar" id="x2" >blahblahblah X2</div>
</div>

$( function() {
    $( ".bar" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( ".foo" ).click(function() {
      var id = $(this).data("id");
      $('#'+id).dialog( "open" );
    });
});

JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。