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

我有一个'div'容器'obj_image'，其中有另一个'div''like_icon'，如果用户点击它，它将发送一个ajax请求，如果成功，将'like_icon'的类更改为其他。我的问题是，如果单击一次，效果会很好，但下次该元素什么都不做，我必须将鼠标移到“obj_image”元素的左边，以便再次单击

HTML

---

应该是这样的：

$(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');
            },                
        });
     });
});
});

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

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

---

如果找到

类似图标

，则将其替换为

无类似图标

，否则相反

为什么要在悬停处理程序之后绑定单击处理程序？我有几个“obj_image”元素，只在指针位于元素上方时才提供功能。但如果单击某个元素，也会将鼠标悬停在该元素上方。

$(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');
            },                
        });
     });
});
});

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