javascript - 在 jQuery 中异步切换 Like 和 Unlike

Question

我正在为我的网站实现我自己的喜欢/不喜欢系统。 PHP 部分已经完成并且一切正常，但我正在尝试使 Like/Unlike 过程与 jQuery 的 AJAX 方法完全异步。

我想要实现的是让用户按下赞按钮，然后赞按钮会变成黄色(就像被按下一样)并且 URL 会变成unlike，当点击时，用户基本上不会喜欢该项目，按钮将再次获得其原始颜色。

喜欢的部分已经在工作，但我无法在这两者之间切换。

这是我一直在尝试的:

HTML/ Twig :

<li><a href="{{ S_IMAGE_NAME }}?do={% if S_IMAGE_LIKED == true %}un{% endif %}like" data-image-action="likeUnlike"><span class="glyphicon glyphicon-thumbs-up" {% if S_IMAGE_LIKED == true %}style="color: #f0c36d;" title="Unlike"{% else %}title="Like"{% endif %} data-placement="right"></span></a></li>

jQuery:

$('[data-image-action="likeUnlike"]').click(function(e){

    var likeHref    = $(this).attr('href');
    var likeUnlike  = (likeHref.indexOf('unlike') != -1) ? 'unlike' : 'like';
    var unLikeUrl   = likeHref.replace(!likeUnlike, likeUnlike); // This is wrong, but how else do I do this?
    var thumbColor  = (likeUnlike == 'like') ? '#f0c36d' : '#eee';

    $(this).attr('href', unLikeUrl);
    $('.image-options .glyphicon-thumbs-up').attr('data-original-title', ucfirst(likeUnlike));
    $('.image-options .tooltip-inner').text(ucfirst(likeUnlike));
    $('.image-options .glyphicon-thumbs-up').css('color', thumbColor);

    $.ajax({
        type: 'GET',
        url: likeHref,
        success: function(data){

            // console.log(data); return;
            var response = $.parseJSON(data);

            if ('error' in response)
            {
                display_alert(response.error, 'danger', 3000, 'top');   
                return;
            }

            $('.likeCount').text(response.likeCount);
        }
    });

    e.preventDefault();
    return false;
});

刷新页面后，逻辑与 Twig if 语句一起工作得很好，但我想在不重新加载页面的情况下实现同样的效果。

总结一下:

• 用户点击喜欢
• Glyphicon 变为黄色，标题变为Unlike，URL 变为unlike
• 用户现在点击Unlike
• Glyphicon 变成浅灰色，标题变成Like，URL 变成like

我怎样才能做到这一点？我的代码有什么问题？

Answer 1

// This is wrong, but how else do I do this?
likeHref.replace(!likeUnlike, likeUnlike);

基本上你想用它的反向替换当前状态(这不是 bool 值 NOT 为我们所做的:-))。当前是likeUnlike，也是如此

var unlikeLike = (likeUnlike == 'like') ? 'unlike' : 'like';

现在，由于 replace 确实采用了正则表达式，我们可以简单地匹配两种可能的措辞并将它们替换为新的:

var unlikeHref = likeHref.replace(/(un)?like/g, unlikeLike);