jQuery - 单击时取消绑定和重新绑定鼠标悬停

Question

我想取消绑定并重新绑定当项目被点击时的悬停样式。

$('.merc-list img').mouseover(function(){
    if ($(this).hasClass('with-grayscale')){
        $(this).removeClass('with-grayscale');
    }
    $(this).css('transform', 'scale(' + 1.3 + ')');
    $('.merc-list img').not(this).each(function(){
        $(this).addClass('with-grayscale');
        $(this).css('transform', 'scale(' + 0.9 + ')');
    });
});

$('.merc-list img').mouseleave(function(){
    if ($(this).hasClass('with-grayscale')){
        $(this).removeClass('with-grayscale');
    }
    $(this).css('transform', 'scale(' + 1.0 + ')');
    $('.merc-list img').not(this).each(function(){
        if ($(this).hasClass('with-grayscale')){
            $(this).removeClass('with-grayscale');
        }
        $(this).css('transform', 'scale(' + 1.0 + ')');
    });
});

$('.merc-list img').on('click', function(){
    if ($(this).hasClass('selected')){
        $(this).bind('mouseover mouseleave'); // rebind for clicked image
        $(this).removeClass('selected');
        $(this).css('transform', 'scale(' + 1.0 + ')');
        $('.merc-list img').not(this).each(function(){
            $(this).bind('mouseover mouseleave'); // rebind for every other image except clicked image
            $(this).removeClass('with-grayscale');
            $(this).css('transform', 'scale(' + 1.0 + ')');
        });
    }else{
        $(this).unbind('mouseover mouseleave'); // unbind for clicked image
        if ($(this).hasClass('with-grayscale')){
            $(this).removeClass('with-grayscale');
        }
        $(this).addClass('selected');
        $(this).css('transform', 'scale(' + 1.3 + ')');
        $('.merc-list img').not(this).each(function(){
            $(this).unbind('mouseover mouseleave'); // unbind for every other image except clicked image
            $(this).addClass('with-grayscale');
            if ($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }
            $(this).css('transform', 'scale(' + 0.9 + ')');
        });
    }
});

所以当没有悬停或点击事件时，它最初的样子是这样的：

当我将鼠标悬停在它上面时，所有其他图像都会缩小并变成灰色，并且悬停在上面的元素会变大并且没有灰度（在本例中我将鼠标悬停在 Phantom 上）

现在，当我单击 Phantom 时，我想冻结每个雇佣兵上的每个mouseover 和mouseleave。 但是，例如，当我取消点击 Phantom 时，我想取消冻结所有内容并返回到原来的悬停动画。

正如您在我的代码中看到的那样，我正在解除绑定和重新绑定 mouseover 和 mouseenter 功能，但它没有重新绑定（它不会回到原来的悬停状态动画）。

感谢您的帮助！

Answer 1

我不会使用绑定和重新绑定，而是使用flag。标志只是一个布尔值，它告诉你的程序是否做某件事。因此，在这种情况下，我们将有一个标志来指示 mouseenter 和 mouseleave 事件是否应该工作。

例子：

var shouldHover = true;

$('div').mouseenter(function () {
  if (shouldHover) {
    $(this).css({'background':'#4286f4'})
  }
});

$('div').mouseleave(function () {
  if (shouldHover) {
    $(this).css({'background':'#e3ffad'})
  }
});

$('div').click(function () {
  shouldHover = false;
});

div {
  display:inline-block;
  width:100px;
  height:100px;
  background:#e3ffad;
  text-align:center;
  line-height:100px;
  font-weight:bold;
  font-size:100px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>