2013-04-24 117 views
0

我目前正在研究一些JQuery代碼,這些代碼將使它們在用戶鼠標懸停在特定對象上時出現在工具提示旁邊。大約有13個獨特的工具提示,每個工具提示都有許多不同的觸發器。我只是在確定一種將數據傳遞給我的函數的方法時遇到了一些問題,因此我不必使用不同的標識符創建13組幾乎相同的函數。下面是我使用的代碼,它的作品,但需要被多次複製:嘗試從.on()地圖中將數據傳遞給函數

jQuery(document).ready(function($){ 

function phpTooltipPosition(event) { 
    var phptooltipX = event.pageX - 8; 
    var phptooltipY = event.pageY + 8; 
    $('#marpole').css({top: phptooltipY, left: phptooltipX}); 
} 

function phpMethod(event) { 
    $('#marpole').removeClass('hidden') 
    phpTooltipPosition(event); 
} 

function phpHide() { 
    $('#marpole').addClass('hidden'); 
} 


$('.marpole').on({ 
    mousemove : phpTooltipPosition, 
    mouseenter : phpMethod, 
    mouseleave: phpHide 
}); 
}); 

當我在這讀了,我讀了使用。對一個事件映射(),使得它讓你可以」將數據傳遞給函數...有沒有解決這個問題的方法?

+0

所以它具有不同ID傳入的相同函數? – PlantTheIdea 2013-04-24 21:45:46

+0

是的,會有不同類的項目,會觸發不同ID的工具提示。 – 2013-04-24 22:16:28

回答

0

嘗試代碼在這種風格來幫助你分離出你的邏輯與事件:

// Ensures code inside this function is called once jQuery is loaded. 
jQuery(function() { 

    $('div').click(function() { 
     functionToCall.apply(this, arguments); 
    }); 

}); 


var functionToCall = function() { 
    // Actual code here 
}; 

如果你需要從一個主機事件的多個事件,你可以使用jQuery的.on()函數來處理,作爲好。

$('#outer-wrapper').on('click', '.div-you-want-evented', function() { 
    // Actual code here 
}) 

我認爲這回答你的問題?根據問題,不是100%確定你需要什麼。

0

將id傳入您的函數。

$('.marpole').on({ 
    mousemove : function(event){ 
     phpTooltipPosition(event,$(this)); 
    }, 
    mouseenter : function(event){ 
     phpMethod(event,$(this)); 
    }, 
    mouseleave: function(event){ 
     phpHide(event,$(this)); 
    } 
}); 

然後使用它!

function phpTooltipPosition(event,$item) { 
    var phptooltipX = event.pageX - 8; 
    var phptooltipY = event.pageY + 8; 
    $item.css({top: phptooltipY, left: phptooltipX}); 
} 

容易心慌。

+0

我試過這種方法,但由於某種原因,它沒有奏效。感謝您的建議,儘管(我一直在嘗試幾種方法來使用您在此使用的路線)。最後,我結束了爲每個班級製作獨特功能的可恥路線。 – 2013-05-02 23:06:12

+0

我剛剛意識到我做了一個非常愚蠢的方式...計算ID然後傳入,當我可以走更簡單,更少的代碼路由傳遞jQuery對象。我明白需要讓它工作,但當你停下來的時候,我真的建議你把它清理乾淨。它不會像你想象的那麼難。 – PlantTheIdea 2013-05-03 13:20:47