2015-08-25 47 views
0

我寫了一個帶有Flask服務器端的網站,用於監視構建在我正在運行的其他生成計算機上的數據。在監控頁面上,我具有每隔幾秒更新一次的特定機器的當前狀態。我希望能夠將鼠標懸停在某些機器的名稱上,並且會彈出一個工具提示,顯示正在創建的當前數據。我目前有內置的功能來將數據服務器端存儲在數據庫中並輪詢數據庫。但到目前爲止,它將返回數據的所有狀態。我很好,但我不能區分它是哪個元素,所以我不能顯示正確的數據。在我的mouseover函數中,我有一個ajax調用,並且在成功函數中,我獲得了當前DOM元素的信息。

$('.target').mouseover(function() { 
    $.getJSON('/_get_platform', { 
    statusID: {{ statusID }} 
      }, function(data) { 
    var $this=$(this); 
    var $tip=$($this.attr('data-tooltip')); 
    }); //end getjson 
}); //end mouseover 

我打算比較$ tip(例如)id #debugTip。因此,如果我知道鼠標位於id爲debugTip的元素上,那麼我可以顯示與此元素相關的適當數據。

(我已經帶走所有像提示等外來代碼...爲了簡潔)

誰能告訴我怎麼可以比較這對一些我知道的?我已經嘗試使用$ tip =='#debugTip'和$ tip.is('#debugTip'),但無論是沒有工作或我沒有正確使用它。任何人都知道我的錯誤是什麼?

在此先感謝!

+0

可能重複的[jQuery「this」在鏈中變化](http://stackoverflow.com/questions/16364352/jquery-this-changing-inchain) – dave

回答

1

只有在您執行ajax請求之前,您才能訪問this。所以你必須在進入該Ajax回調之前存儲提示。

$('.target').on('mouseover', function() { 

    // get the tip, while we still have 'this' object (before the ajax) 
    var $tip = $($(this).data('tooltip')); 

    $.getJSON('/_get_platform', { 
    statusID: {{ statusID }} 
    }, function(data) { 

    // check if it's a debug tooltip 
    if ($tip.is('#debugTip')) { 
     console.log("it's the debug tip"); 
    } else { 
     console.log("normal tooltip"); 
    } 

    }); //end getjson 
}); //end mouseover 

希望這會有所幫助。

0

如果您需要引用鼠標懸停的元素,則需要將其保存在一個變量中,然後您可以在$ .getJSON的回調中引用它。

$('.target').mouseover(function() { 
 
         var mouseOveredElement = $(this); 
 
         $.getJSON('/_get_platform', { 
 
           statusID: {{ statusID }} 
 
         }, function(data) { 
 
           var tip=$(mouseOveredElement).attr('data-tooltip'); 
 
         }); //end getjson 
 
        }); //end mouseover

+0

順便說一句,你$ .getJSON函數提取了一些回調中的'數據',你的代碼似乎沒有利用'數據'。不確定,也許有些代碼被遺漏了? –

+0

您在'$ .getJSON()'回調中使用'mouseOveredElement'的方式不正確 - 您可能需要執行'var $ tip = $(mouseOveredElement.data('tooltip'));'代替。 –

+0

@JamesPederson在我的方式使用沒有任何錯誤。結帳在這裏:https://jsfiddle.net/pengyanb/1zL33cb0/3/ –

1

如果你想請檢查是否或不元素具有 「#debugTip」 標識的$( '目標'),那麼你可以做:

if($tip.is("#debugTip")){ 
    console.log('Debug data here'); 
} 
+0

'this'不是回調裏面的dom元素,所以既不是'$ this' @ – charlietfl

+0

@charlietfl啊,很好。謝謝! –