Question

我有一个'div'容器'obj_image'有另一个'div''like_icon'，如果用户点击它，发送ajax请求，如果成功，则更改'like_icon'的类别。我的问题是，如果我点击一次，它很棒，但下次元素不做任何事情，我必须鼠标离开'obj_image'元素再点击一次。

HTML

<div class="obj_image">
    <div class="like_icon"></div>
</div>

JS

$(document).ready(function() {
$('.obj_image').hover( function() {

     $('.obj_image:hover').find('.like_icon').bind('click', function() {            
        $.ajax({
            async: false,
            url:'url', 
            type: "POST",
            success: function(){
                $('.obj_image:hover').find('.like_icon').addClass('no_like_icon').removeClass('like_icon');
            },                
        });
     });

     $('.obj_image:hover').find('.no_like_icon').bind('click', function() {
        $.ajax({
            async: false,
            url:'', 
            type: "POST",
            success: function(){
                $('.obj_image:hover').find('.no_like_icon').addClass('like_icon').removeClass('no_like_icon');
            },                
        });
     });
});
});

Answer 1

应该是这样的：

$(document).ready(function() {
$('.obj_image').hover( function() {

     $(this).find('.like_icon').bind('click', function() {            
        $.ajax({
            async: false,
            url:'url', 
            type: "POST",
            success: function(){
$(this).find('.like_icon').addClass('no_like_icon').removeClass('like_icon');
            },                
        });
     });
}, // this is the important part
function(){ //call the mouseleave function
     $(this).find('.no_like_icon').bind('click', function() {
        $.ajax({
            async: false,
            url:'', 
            type: "POST",
            success: function(){
$(this).find('.no_like_icon').addClass('like_icon').removeClass('no_like_icon');
            },                
        });
     });
});
});

Answer 2

您可以使用.toggleClass函数来交换找到的类，例如

$('.obj_image').hover(function()
{
    $(this).children('.no_like_icon').toggleClass('like_icon no_like_icon');
});

如果找到like_icon，则会将其替换为no_like_icon，否则相反。

如何在jQuery中使用悬停效果交换类？

2 个答案: