Question

我问了一个关于这个的问题，但这个帖子沦为混乱，失去了问题的要点。基本上我正在尝试设置ajax，以便“喜欢”或“不像”链接更新数据库并显示新状态而无需刷新页面。

所以我有一个“view.php”页面，其中包含由PHP循环生成的链接。它们看起来像这样：

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=i&pid=999999990" title="Click to LIKE this photo" class="like do_like">like</a>
</div>

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=d&pid=999999991" title="Click to UNLIKE this photo" class="like do_unlike">unlike</a>
</div>

请注意，每个链接都有两个类：首先是“喜欢”类，然后是“do_like”类或“do_unlike”类，根据它是“喜欢”的链接还是“不喜欢”的链接分别。（原来我只有“do_like”和“do_unlike”类，我用它来通过css将链接转换为翻转类型的图像/图标，但我也添加了“like”类，对于ajax - 请参阅下文）。

当用户点击其中一个链接时，接收处理器.php脚本从查询字符串中获取变量值对，并使用它们来更新数据库，然后构建一个新的链接形式，它与之相呼应出。新形式的链接使得“喜欢这个”链接变成“不像这个”链接，反之亦然。因此，对于上面的第一个“like”链接，数据库返回：

processor.php?c=cars&p=2&s=d&u=d&pid=999999990

查询字符串中的“u”变量决定了在“喜欢”（u = i）的情况下，processor.php页面是否会将数据插入数据库，或者从中删除数据在“不像”（u = d）的情况下的数据库。（我正在使用准备好的PDO语句进行数据库插入/删除。）

我正在使用jquery / ajax插入这个新建的链接来代替点击的链接，而不必刷新页面。

为此，在“view.php”页面中我包含了jquery.js并使用了以下javascript函数：

<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
    e.preventDefault();
    var link = $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            link.attr('href',data);
    });
});
});
</script>

问题是，虽然这个函数将数据发送到处理脚本OK，并且在没有页面刷新的情况下更改了页面中链接的href属性（我可以通过点击后在浏览器中复制链接看到它正常），它不会更改链接的文本，类或标题。因此，我必须刷新页面以查看链接实际上已更改的任何视觉提示（我可能只是在processor.php页面中使用标题重定向）。

如何修改功能（或更改功能），以便还替换链接的文本，类和标题？这样（例如，转换“喜欢”链接）：

<a href="processor.php?c=cars&p=2&s=d&u=i&pid=999999990" title="Click to LIKE this photo" class="like do_like">like</a>

变为：

<a href="processor.php?c=cars&p=2&s=d&u=d&pid=999999990" title="Click to UNLIKE this photo" class="like do_unlike">unlike</a>

Answer 1

使用if条件检查当前状态并更新属性。

$(function () {

    $("a.like").click(function (e) {
        e.preventDefault();
        var link = $(this);           
        var alreadyLiked = (link.text() == "UnLike") ? true : false;            
        $.get(link.attr('href'), function (data) {
        link.attr('href', data);
        if (alreadyLiked) {
            link.removeClass("do_unlike").addClass("do_like").text("Like").attr("title", "Click to LIKE this photo");

        }
        else {
            link.removeClass("do_like").addClass("do_unlike").text("UnLike").attr("title", "Click to UN LIKE this photo");
        }
        alreadyLiked = !alreadyLiked;           
    });

    });
});

此代码可以使用。测试。假设每次get请求都正确地为您提供了url（用于删除/插入）。

Answer 2

您还需要更改课程和标题：

[...]
$.get(
    $(this).attr('href'),
    function(data){
        link.attr('href',data);
        link.toggleClass('do_like do_unlike');
        link..attr('title', 'change title here');
});

Answer 3

这是基于Shyju和Pitchinnate的反应（所以感谢两者！），它使用css翻转链接转换方法（我还包括淡入淡出效果）：

<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
    e.preventDefault();
    var link = $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            link.attr('href',data);
            link.toggleClass('do_like do_unlike');

var titleState=(link.attr("title") == "Click to LIKE this photo") ? "no" : "yes";
if(titleState=="yes")
    {
    link.attr('title', 'Click to LIKE this photo');
    }
    else
    {
    link.attr('title', 'Click to UNLIKE this photo');
    }

    });

$(this).parents('div.tools').fadeOut(1000);
$(this).parents('div.tools').fadeIn('slow');

});
});
</script>

改进此AJAX功能以更新“喜欢此”链接

3 个答案: