javascript - jQuery 对话框同时显示

Question

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

我用一种方法让它工作，但在这种情况下，对话框只会弹出一次。按照我现在的方式，默认情况下会显示所有框，单击 x 后，我可以单击照片，它会再次打开它们。我也尝试过用 $(this) 替换 .employee .employeeData 但没有成功。

编辑:我发现 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