Php 类似gmail的星形按钮-jquery问题

我已经建立了星按钮，使用它就像“星项目”。我正在运行代码。但我有个问题

当我点击星号时，它会变成一个带星号的项目，星号图像也会改变。 但当我再次单击取消启动时，它就是不起作用。我需要刷新页面以取消启动它

而且，即使是第一步也不适用于chrome

添加星号： jquery

php:

php:

---

要添加星号，请执行以下类似操作：

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

删除：

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

你根本不应该以你使用它的方式来使用

动画。我还使用了容器的ID，然后在其中找到了图像，而不是像您那样将
class
放在一起。不过，这只是个人偏好……主要的方法是使用
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;
    });
});

请注意，我们正在使用
类
来跟踪元素是否已加星号。这意味着在PHP中，您需要将
starred
类添加到页面加载时已加星号的任何元素中。另外，我使用了
$.post
而不是
$.ajax
，因为这是做同样事情的一种更简单的方法。
您已经定义了启动和取消启动项目的单击事件。如果您需要查看项目的当前状态，请决定是启动还是取消启动它。您需要在单击事件内部进行分支。
代码中存在一些问题，这里的两个答案都是相关的，而且都是正确的。作为一个像你这样的新手，我想说你正在学习的路上

我会为所有的星星使用一个单独的类，一个与是否有星星无关的类。也许是“明星”之类的东西您需要将页面刷新为非星号，因为您从未在前端将其更改为星号。如果您使用WebKit的Web inspector的firebug之类的工具，您将看到链接的类仍然是“yildiz”

我不会给你一个完整的答案，因为我会剥夺你在这里的一次很棒的学习经历。以下是一些要点：

记住您的click（）事件连接到哪些对象：$（“.yildizf”）和$（“.yildiz”）
当您单击一个项目时，它是否真的改变了类以便jQuery知道它是不同的？本质上，您是在一次又一次地“标记”同一项，因为您从不允许jQuery将其视为需要取消标记的内容
如果除了其他类（如）之外还使用了一个“star”类，那么您可以将单击事件附加到$（“a.star”），并在其中确定您是应该对该项目加上星号还是取消星号
我希望这一切都有意义。
下次您能将代码的格式设置得更好一点吗？这有点难读。我是jquery和php的新手：）对不起，我是说在你的问题中。看起来有人为你格式化了你的代码！我用一个完整的解决方案更新了答案，这个解决方案应该可以对代码进行一些额外的更改。另外，请务必查看下面@Groovetrain的答案以获得进一步的了解。非常感谢您的解释。我认为这是有意义的：）我将重写代码。yildiz在土耳其语中的意思是star（顺便说一句：）
<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>

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

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

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