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

小提琴的例子

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