如何訪問由jQuery對話框引用的div元素？

Question

我有一些JavaScript代碼whcih創建了一個對話框，看起來是這樣的：

$(function() { 
    $('.hoverList').dialog({ 
    autoOpen: false, 
    hide: { 
     effect: "fade", 
     duration: 400 
    }, 
    title: $(this).data("title"), 
    modal: false 
});}; 

在這種情況下，可以在頁面上的多個hoverlist類元素。我遇到的問題是這條線上面：

title: $(this).data("title") 

在我的PAG，包含我的對話框股利如下：

<div class='hoverlist' data-title='My Dialog Title'>...</div> 

當的JavaScript雖然運行，$（本）在對話框的'title：'鍵中返回，指的是文檔本身，而不是該對話框指令適用的元素，因此<div>元素的數據（「標題」）在此處不可訪問。

請注意，在同一頁面上可能會有多個懸浮列表，因此我不能僅通過一個ID而不是一個類來選擇它，而無需重複重新創建相同的代碼。試圖找出我可以如何構建對話框，其標題是<div>的數據元素中引用的標題，我將其轉變爲對話框。這怎麼可能？

Answer 1

如果你想這樣做，那麼你需要遍歷jQuery選擇器對象，以便'$（this）'指向當前節點。

$(function() { 

    $('.hoverList').each(function(){ 
     $(this).dialog({ 
      autoOpen: false, 
      hide: { 
       effect: "fade", 
       duration: 400 
      }, 
      title: $(this).data("title"), 
      modal: false 
     }); 
    }); 
});