将jQuery UI对话框应用于类

Question

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

Here是我的小提琴和代码。

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" );
    });
});