0

我问了一个关于这个的问题，但帖子变得混乱，失去了问题的要点。基本上我正在尝试设置 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>

请注意，每个链接都有两个类：首先是“like”类，然后是“do_like”类或“do_unlike”类，具体取决于它是指向“like”的链接还是指向“unlike”的链接。（最初我只有“do_like”和“do_unlike”类，我用来通过css将链接转换为翻转类型的图像/图标，但我也添加了“like”类，用于ajax - 见以下。）

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

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

它是查询字符串中的“u”变量，它决定了 processor.php 页面是在“like”（u=i）的情况下将数据插入数据库，还是从数据库中删除数据“不相似”（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>

?

4

3 回答 3

0

使用 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;           
    });

    });
});

此代码将起作用。经测试。假设每次获取请求都会正确地为您提供 url（用于删除/插入）。

于 2012-05-29T21:34:16.467 回答
0

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

[...]
$.get(
    $(this).attr('href'),
    function(data){
        link.attr('href',data);
        link.toggleClass('do_like do_unlike');
        link..attr('title', 'change title here');
});
于 2012-05-29T21:39:31.613 回答
0

这是基于 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>
于 2012-05-30T00:08:52.713 回答