JavaScript/jQuery 工具提示函数使用 "this"？

Question

JSFiddle 链接:http://jsfiddle.net/lustre/awpnd6L1/1/

想知道是否有一种方法可以在 JavaScript 中创建一个函数，这样我就不必在每次需要“更多信息”工具提示时复制 mouseenter 代码。这可能吗？

下面是我希望将其压缩为一个函数的 JavaScript，这样我就不必多次复制它。

  jQuery(".bspaMoreInfo").mouseenter(function(){
    clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
    jQuery('.bspaMoreInfoText').show(200);

}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        jQuery('.bspaMoreInfoText').hide(200);
    }, 650);
    jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId); 
});

jQuery(".bspaMoreInfoText").mouseenter(function(){
    clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        jQuery('.bspaMoreInfoText').hide(200);
    }, 650);
    jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId); 
});

希望这是有道理的 x3

Answer 1

您可以为此作业创建自定义 jQuery 插件。就处理重复代码而言，这是非常自然的方法。

$.fn.moreInfo = function() {
    return this.each(function() {

        var $text = $(this).next();

        $(this).mouseenter(function () {
            clearTimeout($text.data('timeoutId'));
            $text.show(200);
        })
        .mouseleave(function () {
            $text.data('timeoutId', setTimeout(function () {
                $text.hide(200);
            }, 650));
        });

        $text.mouseenter(function () {
            clearTimeout($text.data('timeoutId'));
        }).mouseleave(function() {
            $text.data('timeoutId', setTimeout(function () {
                $text.hide(200);
            }, 650));
        });
    });
};

jQuery(document).ready(function () {
    $(".bspaMoreInfo").moreInfo();
});

演示:http://jsfiddle.net/awpnd6L1/3/