Question

我正在组建一个团队页面，每个团队成员都有一个div，其中包含一张照片和一些员工信息。当我点击图片时，我想要弹出一个对话框，并使用$this上下文查找同一div中的员工数据。我找不到办法做到这一点。

我让它以一种方式工作，但在这种情况下，对话框只会弹出一次。我现在拥有它的方式，所有框都默认显示，一旦我完成了点击x，我就可以点击照片然后再打开它们。我也尝试用.employee .employeeData替换$(this)并且没有运气。

编辑：我发现autoOpen: false会阻止对话框自动打开，但仍无法解决我的问题。

更新：http://jsfiddle.net/eTBS5/1/

var $dialog = $('.employee .employeeData').dialog({
    width: 600,    
    height: 400,
    modal: true,
    close: function() {
        $(this).dialog("close");
    }
});

$('.employee').click(function(){
    $dialog.dialog('open');
});

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 1 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 2 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 3 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" /> 
    <div class="employeeData">
        <p>EMPLOYEE 4 - This is a paragraph about this person.</p>
    </div> 
</div>

Answer 1

问题是因为您一次分配所有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');
});

Example fiddle

Answer 2

也可以这样做： DEMO

var $dialog = $('#dial').dialog({
              width: 600,    
              height: 400,
              modal: true,
              autoOpen: false,
              open: function() {
                $(this).html($(this).data('sender'));
              }
        });

        $('.employee').click(function(){
            $dialog.data('sender',$('.employeeData',this).html()).dialog('open');
        });

Answer 3

也可以这样做：

<强> jsFiddle

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变量，然后可以在单击处理程序中直接引用该变量。您也不需要关闭处理程序。

Answer 4

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

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

所有jQuery对话框都会立即显示出来

4 个答案: