Question

我已经建立了星形按钮，可以像“已加星标的项目”一样使用它。我有代码在运行。但我有一个问题。

当我点击星星时，它会成为加星标的项目并且星形图像会发生变化。但是，当我再次点击unstar时，它只是不起作用。我需要刷新页面才能取消它。

即便是第一步也不适用于镀铬。

添加星标代码： 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，然后找到了它里面的图像，而不是像你一样把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;
    });
});

请注意，我们正在使用class来跟踪元素是否已加星标。这意味着在PHP中，您需要将starred类添加到页面加载时已加星标的任何元素。另外，我使用$.post代替$.ajax，因为它是一种更简单的方法来做同样的事情。

Answer 2

您的代码中存在一些问题，这里的两个答案都是相关的，两者都是正确的。像你一样绿，我会说你正在学习好的道路上。

我会为所有星星使用一个单独的类，一个与星号或未加星号无关的星号。也许像'明星'这样的东西。 :)你需要刷新页面才能取消星标，因为你从未在FRONT-end上实际更改它以进行加星标。如果你使用像WebKit Web检查器的firebug这样的工具，你会发现链接的类仍然是“yildiz”。

我不会给你一个完整的答案，因为我会在这里抢夺你的 awesome 学习经历。以下是一些提示：

请记住您的click（）事件所连接的对象：$（“。yildizf”）和$（“。yildiz”）
当您点击某个项目时，它是否实际更改了类，以便 jQuery 知道它有所不同？从本质上讲，你一遍又一遍地“主演”同一个项目，因为你永远不会允许jQuery将它看作是取消明星所需的东西
如果您使用其他课程之外的“星级”课程（例如＆lt; a class =“star yildiz”...＆gt;），那么您可以将点击事件附加到$（'a.star' ），并在那里弄清楚，如果你应该主演或取消该项目的明星。

我希望这一切都有道理。

Answer 3

您已将点击事件定义为星标并取消星标该项目。如果您需要查看项目的当前状态，请确定是否要为其加注星标或取消星标。你需要在点击事件中进行分支。

gmail就像星际按钮-jquery问题

3 个答案: