調用javascript函數獲取元素的偏移量

Question

我有一個可拖動的div，當你放下它時，它會給你它的左邊和頂邊的值，如果它包含特定的類。

例子：

$("div").draggable({ 
    cursor:'move', 
    stop: function() { 

     if ($(this).hasClass('cool')) { 
      var state = "Class cool exists" 
     } 
     var b = $(this); 
     var bl = b.offset().left; 
     var bt = b.offset().top; 
     console.log(" Left:" + bl + " Top:" + bt + " Class:" + state);  


    }}); 

和小提琴：http://jsfiddle.net/sq4XZ/

現在這個工作剛剛找到，但我想打電話給在單獨的功能所有這些方法，因爲在我的實際腳本我不得不調用多次按鈕點擊功能，徘徊，基本上不只是你放棄div。

因此，我所做的是：

function cool(){ 

     if ($(this).hasClass('cool')) { 
      var state = "Class cool exists" 
     } 
     var b = $(this); 
     var bl = b.offset().left; 
     var bt = b.offset().top; 
     console.log(" Left:" + bl + " Top:" + bt + " Class:" + state);  

} 

$("div").draggable({ 
    cursor:'move', 
    stop: function() { 

     cool(); 


    }}); 

這樣每次我需要得到這些值我會叫涼（）函數。

的jsfiddle：http://jsfiddle.net/5bQ4d/

現在，如果你是一個JavaScript大師你現在應該知道，這不應該的，因爲$（這）工作。如果我用$（'div'）替換$（this）就可以了。但是當我調用cool（）時，它不知道哪個$（this）是。

在我的實際頁面中，我有很多這樣的div，所以當我調用cool（）時，我必須傳遞我正在討論的div id/name/class。 那麼，如何將div name/id/class傳遞給cool（）函數，以便它知道$（this）表示我點擊/懸停/放下的div？

感謝

Answer 1

你可以用Function#call：

stop: function() { 

    cool.call(this); 


}}); 

這將迫使this在裏面cool相同this，因爲它是內部stop。 http://jsfiddle.net/5bQ4d/1/

Answer 2

嘗試這樣：

function cool(ui) { 

    if (ui.hasClass('cool')) { 
     var state = "Class cool exists" 
    } 
    var b = ui; 
    var bl = b.offset().left; 
    var bt = b.offset().top; 
    console.log(" Left:" + bl + " Top:" + bt + " Class:" + state);  
} 

$("div").draggable({ 
    cursor:'move', 
    stop: function(el, ui) { 
     cool(ui.helper); 
    } 
}); 

小提琴：http://jsfiddle.net/caf9R/

在文檔：http://jqueryui.com/demos/draggable/

所有的回調函數（啓動，停止，拖動）接受兩個參數：原 瀏覽器事件和一個準備好的UI對象，查看下面的文檔 這個對象（if你的名字你的第二個參數 'UI'）：

• ui.helper - 表示幫手jQuery對象多數民衆贊成被拖到

Answer 3

你可以這樣做：

function cool(element){  
    if ($(element).hasClass('cool')) { 
     var state = "Class cool exists" 
    } 
    var b = $(element), 
     bl = b.offset().left, 
     bt = b.offset().top; 
    console.log(" Left:" + bl + " Top:" + bt + " Class:" + state); 
} 


$("div").draggable({ 
    cursor:'move', 
    stop: function() { 
     cool(this); 
}});