如何切換圖標和班級名稱，並點擊功能點擊

Question

我已經查找了6個小時的答案但找不到。對不起，如果它是重複的。

我是Jquery的新手。

我想改變星型顏色，div的類名，當然在jquery中執行新類的過程。

這裏是我的html代碼：

<div class="fav" haberid="10" habertype="bulunan"><img class="hav" src="http://myurl.com/robot_yeni/inc/media/photos/fav1.gif" border="0" id="10"/></div> 

這是我的jQuery代碼：

$(document).ready(function(){ 

    $('.fav').click(function(){ 
     var haberid = $(this).attr('haberid'); 
     var habertype = $(this).attr('habertype'); 
     var fav = "fav"; 
     $.ajax({ 
      type:"POST", 
      url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php", 
      data: {id: haberid, type: habertype, fav: fav}, 
      success:function(data){ 
      } 
     });  
     $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav2.gif\" />"); 
     $(this).attr('class','fav2'); 
    }); 



    $('.fav2').click(function(){ 
     var haberid = $(this).attr('haberid'); 
     var habertype = $(this).attr('habertype'); 
     var fav = "fav2"; 
     $.ajax({ 
      type:"POST", 
      url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php", 
      data: {id: haberid, type: habertype, fav: fav}, 
      success:function(data){ 
      } 
     });  
     $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav1.gif\" />"); 
     $(this).attr('class','fav2'); 
    }); 
}); 

當我第一次點擊，它從fav1.gif變爲fav2.gif和類名稱從「fav」到「fav2」和$ .ajax發佈。

但是，當我點擊新的fav2.gif時，它不起作用（toogle）。沒有圖標變化，沒有班級變更，沒有阿賈克斯職位。

我該怎麼辦？

Answer 1

$('[class*=fav]').click(function(){ 
    var haberid = $(this).attr('haberid'); 
    var habertype = $(this).attr('habertype'); 
    var fav = $(this).hasClass('fav') ? 'fav2' : 'fav'; 
    $.ajax({ 
     type:"POST", 
     url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php", 
     data: {id: haberid, type: habertype, fav: fav}, 
     success:function(data){} 
    });  
    $(this).html("<img class='" + fav + "' src='http://www.myurl.com/robot_yeni/inc/media/photos/" + fav + ".gif' />"); 
    $(this).attr('class',fav); 
}); 

Answer 2

您無需在同一個div上應用click偵聽器兩次以獲得切換效果。只需應用或刪除特定的類以標識當前的切換狀態。

編輯：

Updated Demo

HTML：

<div class="fav" haberid="10" habertype="bulunan"> 
    <img class="hav" src="http://myurl.com/robot_yeni/inc/media/photos/fav1.gif" border="0" id="10" /> 
</div> 

腳本：

$(document).ready(function() { 

    $('.fav').click(function() { 
     var haberid = $(this).attr('haberid'); 
     var habertype = $(this).attr('habertype'); 

     if ($(this).hasClass("fav")) { 
      var fav = "fav"; 

      $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav2.gif\" />"); 
      $(this).attr('class', 'fav2'); 
     } else if ($(this).hasClass("fav2")) { 
      var fav = "fav2"; 
      $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav1.gif\" />"); 
      $(this).attr('class', 'fav'); 
     } 
     $.ajax({ 
      type: "POST", 
      url: "http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php", 
      data: { 
       id: haberid, 
       type: habertype, 
       fav: fav 
      }, 
      success: function (data) {} 
     }); 
    }); 
});