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时，我想冻结每个这样的mercs上的每个 mouseover 和 mouseleave 。然而，例如，当我取消隐藏 Phantom时，我想解冻所有内容并返回其原始的悬停动画。

正如您在我的代码中看到的那样，我正在解除绑定并重新绑定鼠标悬停和 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>

jQuery - unbind和rebind on click

1 个答案: