Question

我已经尝试过很多其他人提出的不同方法，但我不明白我做错了什么，真的需要一些帮助。我尝试过使用hover，mouseenter / mouseleave，on / off，bind / unbind的各种组合。

基本上，我可以让事情解开，但我不能让它们再次绑定。

我把一个jsfiddle和一个基本的例子放在一起。如果单击＆＃34; Hover Off＆＃34;按钮，mouseenter被禁用。但是如果你点击＆＃34; Hover On＆＃34;按钮之后，mouseenter不再启用。

这是＆＃34; hover＆＃34;功能性：

$('.square').each(function(){
    $(this).bind("mouseenter", function(){
        $(this).addClass('active');
    });
    $(this).bind("mouseleave", function(){
        $(this).removeClass('active');
    });
});

以下是启用/禁用它的内容：

$('.hover_enabled').click(function(){
    $('.square').each(function(){
        $(this).bind("mouseenter");
        $(this).bind("mouseleave");
    });
});

$('.hover_disabled').click(function(){
    $('.square').each(function(){
        $(this).unbind("mouseenter");
        $(this).unbind("mouseleave");
    });
});

Answer 1

您应该传递绑定和取消绑定处理程序的功能，例如：

var mouseEnterHandler = function () {
    $(this).addClass('active');
}
var mouseLeaveHandler = function () {
    $(this).removeClass('active');
};

$('.square').bind("mouseenter", mouseEnterHandler)
            .bind("mouseleave", mouseLeaveHandler);

$('.hover_enabled').click(function () {
    $(this).addClass('active');
    $('.hover_disabled').removeClass('active');

    // I need to bind hover here
    $('.square').bind("mouseenter", mouseEnterHandler)
                .bind("mouseleave", mouseLeaveHandler);
});

但代码变得丑陋且无法维护。您可以改为使用事件委派：

$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
    // toggle the class by checking the type of the event
    $(this).toggleClass('active', event.type === 'mouseenter');
});

// caching the state changers 
var $e = $('.hover_enabled, .hover_disabled').click(function () {
    var $this = $(this).addClass('active'),
        isHoverable = $this.hasClass('hover_enabled');

    // exclude the clicked element from the set and remove the class
    $e.not($this).removeClass('active');
    $('.square').toggleClass('hoverable', isHoverable);
});

上述mouseenter mouseleave处理程序仅在.square元素具有hoverable className时执行。您还可以删除事件处理程序并使用CSS进行样式设置。

.square.hoverable:hover {

}

http://jsfiddle.net/bztec1f4/

Answer 2

重新绑定后，您还需要传递函数。

$('.hover_enabled').click(function(){
    $('.square').each(function(){
        $(this).bind("mouseenter", function(){
            $(this).addClass('active');
        });
        $(this).bind("mouseleave", function(){
            $(this).removeClass('active');
        });
    });
});

我不能让悬停或鼠标中心解除绑定并再次重新绑定

2 个答案: