gmail like star button -jquery問題

Question

我已經制作了star按鈕來使用它，就像「加星標的項目」。我的代碼正在運行。但我有一個問題。

當我點擊明星時，它變成了加星標的項目，並且明星圖像發生了變化。 但是當我再次點擊unstar時，它不起作用。我需要刷新頁面以取消它。

即使第一步不適用於Chrome。

加星代碼： jQuery的

$(function() { 
    $(".yildiz").click(function() { 
     var id = $(this).attr("id"); 
     var dataString = 'id='+id ; 
     var parent = $(this).parent(); 

     $.ajax({ 
      type: "POST", 
      url: "yildizekle.php", 
      data: dataString, 
      cache: false, 
      success: function toggle() 
      { 
       $('.yildizbutton'+id).animate({ 
        src:"star-icon.png", 
        class:"yildizsizbutton"+id, 
       },0); 
      } 
     }); 

     return false; 
    }); 
}); 

PHP：

<a href="javascript:;" class="yildizf" id="'.$row['id'].'"><img class="yildizsizbutton'.$row['id'].'" border="0" src="star-icon.png" alt="Yildizi kaldir" width="16" height="16" /></a> 

刪除星

$(function() { 
    $(".yildizf").click(function() { 
     var id = $(this).attr("id"); 
     var dataString = 'id='+id ; 
     var parent = $(this).parent(); 

     $.ajax({ 
      type: "POST", 
      url: "yildizsil.php", 
      data: dataString, 
      cache: false, 
      success: function toggle() 
      { 
       $('.yildizsizbutton'+id).animate({ 
        src:"star-icon-f.png", 
        class:"yildizbutton"+id, 
       },0); 
      } 
     }); 

     return false; 
    }); 
}); 

PHP：

<a href="javascript:;" class="yildiz" id="'.$row['id'].'"><img class="yildizbutton'.$row['id'].'" border="0" src="star-icon-f.png" alt="Yildiz ekle" width="16" height="16" /></a> 

Answer 1

要添加的明星，做一些與此類似：

$("#"+id).find("img").attr("src", "star-icon.png"); 

要刪除：

$("#"+id).find("img").attr("src", "sstar-icon-f.png"); 

在您使用它在所有的方式，則不應使用animate。我也使用了容器的ID，然後在裏面找到了圖像，而不是像你一樣把它放在一起。這只是個人偏好，但是......主要的要點是使用attr("src")來設置jQuery中圖像的src。

編輯：這是一個完整的解決方案，應該工作。

$(function() { 
    $(".star").click(function() { 
     var id = $(this).attr("id"); 

     if($(this).hasClass("starred")) { 
      $.post("yildizekle.php", {id: id}, function(resp) { 
       $(this).removeClass("starred").find("img").attr("src", "star-icon-f.png"); 
      }); 
     } 

     else { 
      $.post("yildizsil.php", {id: id}, function(resp) { 
       $(this).addClass("starred").find("img").attr("src", "star-icon.png"); 
      }); 
     } 

     return false; 
    }); 
}); 

請注意，我們使用的是class跟蹤元素是否已經出演。這意味着在您的PHP中，您需要將starred類添加到頁面加載時已加星標的任何元素。此外，我使用$.post而不是$.ajax，因爲它是更簡單的做同樣的事情。

Answer 2

您已將單擊事件定義爲明星和未明星項目。如果您需要查看物品的當前狀態，請決定是否要對其進行取星或取消取星。你需要在你的點擊事件中進行分支。

Answer 3

你的代碼有幾個問題，這裏的兩個答案都是相關的，都是正確的。和你一樣綠色，我會說你正在學習的道路上。

我會爲所有星星使用一個單獨的類，如果星號或未星號與星號無關。也許像'明星'一樣。 :)你需要刷新頁面才能取消明星效果，因爲你從未在FRONT-end上實際更改過要加星標的頁面。如果您使用WebKit的Web檢查器的螢火蟲這樣的工具，您會看到鏈接的類仍然是「yildiz」。

我不會給你一個完整的答案，因爲我會在這裏盜取你的真棒學習經驗。下面是一些指針：

1. 記住哪些對象的點擊（）事件連接：當你點擊一個項目$（「 yildizf‘）和$（’耶爾德茲」）
2. ，不是實際上改變類，以便jQuery的知道這有什麼不同？從本質上講，您一次又一次地「重複」同一個項目，因爲您絕不允許jQuery將其視爲需要取消明星的東西。
3. 如果除了其他類別使用「星級」類別（如< a class =「star yildiz」... >），那麼你可以將你的點擊事件附加到$（'a.star'），並且在那裏找出你是否應該主演或取消定位該項目。

我希望這一切纔有意義。