如何在jQuery中使用懸停效果交換類？

我有一個'div'容器'obj_image'有另一個'div''like_icon'，如果用戶點擊它，發送一個ajax請求，如果成功，則將'like_icon'的類改爲其他。我的問題是，如果我點擊一次，它很棒，但下一次元素不做任何事情，我必須鼠標離開'obj_image'元素才能點擊另一次。如何在jQuery中使用懸停效果交換類？

HTML

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

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

來源

2011-11-19 beni

爲什麼你綁定一個懸停處理程序後的點擊處理程序？如果沒有它，不應該點擊工作嗎？ – bozdoz

我有幾個'obj_image'元素，只有當指針位於元素上時纔會提供功能。 – beni

但是，如果你點擊某個東西，你也在它上面盤旋。 – bozdoz

應該是這樣的：

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

來源

2011-11-19 19:07:39 bozdoz

可以使用.toggleClass功能，將換爲它的類被發現，例如

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

如果發現like_icon，它將與no_like_icon代替它，否則相反。

來源

2011-11-19 19:08:49 MacMac

如何在jQuery中使用懸停效果交換類？

回答

相關問題