jQuery对话框一次全部显示

Question

I'm putting together a team page and I have a div for each team member that includes a photo and some employee information. When I click on the picture I want a dialog to popup and use $this context to find the employee data in that same div . I cannot find a way to do this.

I got it working one way, but in that case the dialog box would only pop up once. The way I have it now, all boxes show up by default and once I'm done clicking the x's I can then click on the photo and it opens them all again. I've also tried replacing .employee .employeeData with $(this) and had no luck.

EDIT: I figured out autoOpen: false will keep the dialog from automatically opening, but still doesn't fix my issue.

UPDATED : 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

The problem is because you are assigning all 4 dialogs at once. Try this instead:

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

Can be done like this too: 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

Could also do it this way:

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

The .each() call will create a private scope that you can use to cache the $dialog variable which can then be referenced directly in the click handler. You also don't need the close handler.

Answer 4

Your jQuery selector is going to find all "employee" and "employeeData" objects. You should use the object the specific fired click event is attached to like this:

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