Javascript 将jQueryUI对话框应用于类

在让这个示例与类一起使用时遇到一些问题。我想让每个类在点击时都会弹出一个单独的对话框，其中包含不同的信息

是我的小提琴和密码

HTML

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

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

---

您可能无法使用jquery UI对话框，因为

$（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>

---

您可能无法使用jquery UI对话框，因为

$（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>

---

没有id可以完成吗？如果可能的话，我想找到另一种不用在html中动态分配id的方法，可以不用id吗？如果可能的话，我想找到另一种方法，不用在html中动态分配id

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