0

我正在整理一个团队页面，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>
4

4 回答 4

2

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

示例小提琴

于 2012-12-13T14:23:09.207 回答
1

也可以这样做： 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');
        });​
于 2012-12-13T14:30:10.530 回答
1

也可以这样做：

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

于 2012-12-13T15:05:46.163 回答
0

您的 jQuery 选择器将找到所有“employee”和“employeeData”对象。您应该像这样使用特定触发的点击事件附加到的对象：

 $('.employee').click(function(){
            var empData = $(this).find('employeeData');
            ... get data from empData and open dialog with just that data
 });​
于 2012-12-13T14:26:34.490 回答