Question

我有一个产品项在选择/取消选择时会产生一些效果。我通过点击打开和关闭选定的类来实现这一点，如下所示：

$('.myItem').click(function() {
  $(this).toggleClass('selected'); 
})

现在，当光标在选择项目时离开项目时，我还需要应用一堆效果。

我试图以多种方式实现这一目标，但并未取得成功。实现这一目标的正确方法是什么？

Answer 1

选择包含.myItem类的.selected元素并在mouseleave上执行所需的功能

＆＃13;

$(document).on('mouseleave', '.myItem.selected', function() {
  $(this).html('<h1 style="color:#fff;margin:0">Left from selected!</h1>');
});
$('.myItem').click(function() {
  $(this).toggleClass('selected').empty();  
})

＆＃13;

.myItem {
  width: 200px;
  height: 200px;
  background-color: green;
}
.myItem.selected { background-color: red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Click to toggle class "selected"</p>
<div class="myItem"></div>

＆＃13;

Answer 2

您可以使用mouseleave，然后您只需检查该元素是否具有您想要的类。

$('.myItem').mouseleave(function() {
    if($(this).hasClass('selected')
    {
        //Do effects
    }
});

Answer 3

您必须添加对所选类的检查以及mouseleave事件。

示例：

$('.myItem').click(function () {
    $(this).toggleClass('selected');
});

$('.myItem').mouseleave(function() {
    if ($(this).hasClass('selected')) {
        // do animation
        $(this).animate({
            fontSize: "+=10",
            left: "+=50"
        });
    }
});

或者jQuery添加事件的方式：

$('.myItem').on('click', function () {
    $(this).toggleClass('selected');
});

$('.myItem').on('mouseleave', function() {
    if ($(this).hasClass('selected')) {
        // do animation
        $(this).animate({
            fontSize: "+=10",
            left: "+=50"
        });
    }
});

http://jsfiddle.net/qn6zqqeh/1/

鼠标选择对所选项目的影响

3 个答案: