jQuery：使用函數製作喜愛按鈕？

現在我做了這個：jQuery：使用函數製作喜愛按鈕？

<a href="#" title="[+] Add as favorite"><div class="addFavorite"></div></a>

類=「加入收藏」，是一種正常的灰色星。

然後我有另一班=「AlreadyFavorite」，那是一顆黃色的星星。

我想做一個函數，所以當你點擊灰色的星星時，它會發送一個ajax調用（？），然後成功時它變成黃色（將類更改爲AlreadyFavorite）。

我知道如何製作一個發送ajax調用的onclick函數，但是如何更改樣式/將圖像圖標更改爲黃色？

CSS：

.addFavorit{ 
background: url('../images/addFavorit.png'); 
width: 48px; 
height: 48px; 

} 
.alreadyFavorit{ 
background: url('../images/addFavorit_hover.png'); 
width: 48px; 
height: 48px; 
}

來源

2010-09-02 Karem

儘量不重複自己在可能情況下，避免不必要的元素：

HTML：

<a href="#" id="fav" title="[+] Add as favorite">&nbsp;</a>

CSS：

a#fav{ 
background: url('../images/addFavorit.png'); 
display: block; 
width: 48px; 
height: 48px; 

} 

a#fav.active{ 
background: url('../images/addFavorit_hover.png'); 
}

JAVASCRIPT

function addFav(){ 
    $.ajax({ 
     url: "/favorites/add", 
     data: {"id": articleID}, 
     success: function(){ 
      $('a#fav') 
       .addClass('active') 
       .attr('title','[-] Remove from favorites') 
       .unbind('click') 
       .bind('click', removeFav) 
      ; 
     } 
    }); 
} 

function removeFav(){ 
    $.ajax({ 
     url: "/favorites/remove", 
     data: {"id": articleID}, 
     success: function(){ 
      $('a#fav') 
       .removeClass('active') 
       .attr('title','[+] Add as favorite') 
       .unbind('click') 
       .bind('click', addFav) 
      ; 
     } 
    }); 
} 

//this will make the link listen to function addFav (you might know this already) 
$('a#fav').bind('click', addFav);

點擊鏈接首次在addFav()指定的URL將被調用，併成功處理在成功定義的函數後會被調用。結果：

<a href="#" id="fav" class="active" title="[-] Remove as favorite">&nbsp;</a>

由於重新綁定，第二次點擊將致電removeFav()。結果將是：

<a href="#" id="fav" class="" title="[+] Add as favorite">&nbsp;</a>

之後，它是一個無限循環，因爲您的服務器不會執行。

來源

2010-09-02 11:00:38

工程很好。如果再次點擊，我如何再次移除課程？ – Karem 2010-09-02 12:34:39

添加刪除。請標記爲正確的答案，如果它適合你;-) – 2010-09-02 13:40:10

嗨，是的，我會，但我應該在哪裏添加刪除類，所以它會消除你點擊第二次..所以你可以當你點擊：addClass clickagain：removeClass， clickagain：addClass ...讓我？ – Karem 2010-09-02 16:27:32

只要改變類alreadyFavorite Ajax調用後？或者有什麼我失蹤？

還是alreadyFavorit（如CSS）

$('div').removeClass('addFavorit').addClass('alreadyFavorit')

來源

2010-09-02 10:50:25

jQuery：使用函數製作喜愛按鈕？

回答

相關問題