0

我目前正在研究一些 JQuery 代码，这将使工具提示在用户鼠标悬停在某些对象上时出现在用户鼠标旁边。大约有 13 个独特的工具提示，每个都有许多不同的触发器。我只是在想办法将数据传递给我的函数时遇到了一些麻烦，这样我就不必创建 13 组具有不同标识符的几乎相同的函数。这是我正在使用的代码，它可以工作，但需要多次复制：

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
});
});

当我阅读这篇文章时，我读到使用 .on() 的事件映射可以使您无法将数据传递给函数......有解决方法吗？

4

2 回答 2

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});
}

十分简单。

于 2013-04-24T22:23:04.520 回答
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% 确定您需要什么。

于 2013-04-24T21:44:59.370 回答