JS工作在瀏覽器中，但不是的jsfiddle

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行得到錯誤，說什麼Object對象沒有方法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+""}); 
});