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'），并且在那里找出你是否应该主演或取消定位该项目。

我希望这一切才有意义。