Question

您好我的代码存在问题：

 $("#col3, #col4").betterMouseover(500, function() {
     var color;
     if ($(this).attr('id') == "col3") { color = "#44a0ff"; }
     else { color = "red"; }
     $("#better").css({backgroundColor:""+color+""});
});


(function($) {
        $.fn.betterMouseover = function (accidentTime, funkcia) {
            if (accidentTime == undefined || accidentTime == null) { accidentTime = 250; }
            if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
                funkcia = function() { 
                    console.log("no callback action specified for betterMouseover()"); 
                }; 
            }
            return this.each(function() {
                var jeOut;
                $(this).mouseenter(function() { 
                    var totok = this; 
                    jeOut = false;
                    setTimeout(function(){
                        if (!jeOut) { $(totok).betterMouseoverHandler(funkcia); }
                    }, accidentTime);
                }).mouseleave(function() { 
                    jeOut = true;
                });
            });
        }
        $.fn.betterMouseoverHandler = function (fx) {
            fx.call(this);
        }
}(jQuery));

JSFiddle link

代码适用于浏览器，但不适用于JSFiddle。这是我的小jquery插件maden，我在第9行得到错误说某些对象没有方法betterMouseover。在JSFiddle中有一些限制，所以我无法运行jquery插件吗？

Answer 1

检查此修订后的JSFiddle。

您在定义事件处理程序之前尝试绑定新的插件事件处理程序。将事件处理程序移动到脚本面板的顶部，如下所示：

脚本面板：

/* Define New Handler */
(function($) {
    $.fn.betterMouseover = function (accidentTime, funkcia) {
        if (accidentTime == undefined || accidentTime == null) { 
            accidentTime = 250; 
        }
        if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
            funkcia = function() { 
                console.log("no callback action specified for betterMouseover()"); 
            }; 
        }
        return this.each(function() {
            var jeOut;
            $(this).mouseenter(function() { 
            var totok = this; 
                jeOut = false;
                setTimeout(function(){
                    if (!jeOut) { 
                        $(totok).betterMouseoverHandler(funkcia);
                    }
                }, accidentTime);
            }).mouseleave(function() { 
                jeOut = true;
            });
        });
    }
    $.fn.betterMouseoverHandler = function (fx) {
        fx.call(this);
    }
}(jQuery));

/* Bind New Handler */
$("#col1, #col2").mouseenter(function() {
   var color;
   if ($(this).attr('id') == "col1") { 
       color = "#44a0ff"; 
   } else { 
       color = "red";
   }
   $("#original").css({backgroundColor:""+color+""});
});


$("#col3, #col4").betterMouseover(500, function() {
     var color;
     if ($(this).attr('id') == "col3") { 
         color = "#44a0ff"; 
     } else { 
         color = "red"; 
     }
     $("#better").css({backgroundColor:""+color+""});
});

JS在浏览器中工作，但不在JSFiddle上工作

1 个答案: