Javascript jQuery对话框同时显示

我正在创建一个团队页面，每个团队成员都有一个

div

，其中包括一张照片和一些员工信息。单击图片时，我希望弹出一个对话框，并使用

$this

上下文在同一

div

中查找员工数据。我找不到这样做的方法

我让它以一种方式工作，但在这种情况下，对话框只会弹出一次。按照我现在的方式，默认情况下，所有框都会显示出来，一旦我点击完x，我就可以点击照片并再次打开它们。我还尝试用

$（此）

替换

.employee.employeeData

，但没有成功

编辑：我发现

autoOpen:false

会阻止对话框自动打开，但仍然无法解决我的问题

已更新：

员工1-这是一段关于此人的内容

员工2-这是一段关于此人的内容

员工3-这是一段关于此人的内容

员工4-这是一段关于此人的内容

问题是因为您同时分配了所有4个对话框。请尝试以下方法：

var dialogs = [];

$('.employee .employeeData').each(function() {
    dialogs.push($(this).dialog({
        width: 600,
        height: 400,
        modal: true,
        autoOpen: false,
        close: function() {
            $(this).dialog("close");
        }
    }));
});

$('.employee').click(function() {
    dialogs[$(this).index()].dialog('open');
});

---

问题是因为您同时分配了所有4个对话框。请尝试以下方法：

var dialogs = [];

$('.employee .employeeData').each(function() {
    dialogs.push($(this).dialog({
        width: 600,
        height: 400,
        modal: true,
        autoOpen: false,
        close: function() {
            $(this).dialog("close");
        }
    }));
});

$('.employee').click(function() {
    dialogs[$(this).index()].dialog('open');
});

---

jQuery选择器将查找所有“employee”和“employeeData”对象。 您应该使用特定激发的单击事件所附加到的对象，如下所示：

 $('.employee').click(function(){
            var empData = $(this).find('employeeData');
            ... get data from empData and open dialog with just that data
 });​

---

jQuery选择器将查找所有“employee”和“employeeData”对象。 您应该使用特定激发的单击事件所附加到的对象，如下所示：

 $('.employee').click(function(){
            var empData = $(this).find('employeeData');
            ... get data from empData and open dialog with just that data
 });​

也可以这样做：

也可以这样做：

---

也可以这样做：

var diagOpts = {
      width: 600,    
      height: 400,
      modal: true,
      autoOpen: false
};

$('.employee').each(function() {

   var $this = $(this),
       $dialog = $this.find('.employeeData').dialog(diagOpts);

    $this.on('click', function(){
        $dialog.dialog('open');
    });
});​

---

调用

.each（）

将创建一个私有作用域，可用于缓存

$dialog

变量，然后可在单击处理程序中直接引用该变量。您也不需要关闭处理程序。

也可以这样做：

var diagOpts = {
      width: 600,    
      height: 400,
      modal: true,
      autoOpen: false
};

$('.employee').each(function() {

   var $this = $(this),
       $dialog = $this.find('.employeeData').dialog(diagOpts);

    $this.on('click', function(){
        $dialog.dialog('open');
    });
});​

---

调用

.each（）

将创建一个私有作用域，可用于缓存

$dialog

变量，然后可在单击处理程序中直接引用该变量。您也不需要close处理程序。

看一看，我认为您就快到了-看一看，我认为您就快到了-这在小提琴中工作，在我的实际实现中失败。当我点击它时，这一行基本上是未定义的：

dialogs[$（this.index（））.dialog（'open'）dialogs[$（this.index（））.dialog（'open'）