php - gmail 喜欢星号按钮-jquery 问题

Question

我已经构建了星号按钮来像“加星标的项目”一样使用它。我有代码运行。但我有一个问题。

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

此外，即使是第一步也不适用于 chrome。

添加星级代码: 查询

$(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，因为它是做同样事情的更简单方法。