0

私はチーム ページをまとめてdivおり、写真といくつかの従業員情報を含む各チーム メンバーのページを作成しています。写真をクリックすると、ダイアログがポップアップし、$thisコンテキストを使用して同じ従業員データを見つけますdiv。これを行う方法が見つかりません。

私はそれを 1 つの方法で動作させましたが、その場合、ダイアログ ボックスは 1 回しかポップアップしませんでした。今のやり方では、すべてのボックスがデフォルトで表示され、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

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変数は、クリックハンドラーで直接参照できます。また、closeハンドラーは必要ありません。

于 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 に答える