javascript - Jquery 不绑定(bind)事件 onload

Question

(function() {
var bgOn;
$(".ContainingBox").on('hover', function() {
    function() { 
    bgOn = $(this).css("background-color");
            $(this).css("background-color", "#e5fff8");
      }, function() {
      $(this).css("background-color", bgOn);
      }
 });
})();

我想为悬停绑定(bind)一个事件。当我没有将它包装在匿名函数中并使用 .hover() 时，这段代码工作正常。但是，我们要求不要使用全局变量。所以我需要绑定(bind)事件!

这不可能吗？

Answer 1

你的代码有语法错误，特别是on()不接受多个回调等
此外，没有原生的 hover 事件，您应该使用 mouseenter 和 mouseleave 代替

$(".ContainingBox").on({
    mouseenter: function() {
        $(this).data('bg', $(this).css("background-color"));
        $(this).css("background-color", "#e5fff8");
    },
    mouseleave: function() {
        $(this).css("background-color", $(this).data('bg'));
    }
});

使用 jQuery 的 data()，而不是单个变量，将记住每个元素的背景颜色

FIDDLE