Question

很抱歉，如果这是重复的，但我一直在搜索，只找到了改变文字或课程的解决方案，所以我不知道这是否可行，我只需要有人指点我如何做或如何做的正确方向。

我有两个按钮，一个具有follow属性，我发送给Ajax执行一个函数，另一个unfollow类似但执行相反的功能。我包含了一个代码，我用它来识别要关注或取消关注的用户，它在两个按钮之间切换，但只有当我刷新页面时，我才想知道是否有一种方法可以获得取消关注按钮的新属性成功跟踪用户或取消关注，而不刷新页面。

这是我在ajax上的两个代表团的代码

关注用户

  $("body").delegate("#user_click_id","click",function(event){
 var user_user_id = $(this).attr("user_user_id");
 event.preventDefault();
 $(".overlay").show();
 $.ajax ({
     url: "action.php",
     method : "POST",
     data:{Userfollow:1,user_user_id:1,user_off_id:user_user_id},
     success: function(data){
     $("#follow_msg").html(data);
     $(".overlay").hide();
     count_user_following();
 }       })   })

取消关注用户

   $("body").delegate("#remove_user_click_id","click",function(event){
 var user_unfollow_id = $(this).attr("user_unfollow_id");
 event.preventDefault();
 var data =$(this).serialize();
 swal({
       title: "Are you sure?",
       text:"You are about to unfollow this user!",
        type:"warning",
        confirmButtonText:"Yes, Unfollow",
        cancelButtonText:"Cancel",
        closeOnConfirm:false,
        closeOnCancel:false,
        showCancelButton:true
  },
       function (isConfirm) {
           if(isConfirm){
 $(".overlay").show();
 $.ajax ({
     url: "action.php",
     method : "POST",
     data:{UnfollowUser:1,user_remove_id:1,user_off_id:user_unfollow_id},
     success: function(data){
     swal("Unfollowed","You successfully unfollowed this user","success");
     $(".overlay").hide();
     count_user_following();
  },error:function(data){
    swal("Unsuccessful","something went wrong, please try again","error");
    $.('.overlay').hide();
     count_user_following();
   }
   });
   }else{ 
      swal("You Cancelled","You are still following this user","error");
       count_user_following();
     }
   });
  })

因此，在两个函数中突出显示属性的两个按钮都在下面给出

按照按钮上的属性

  <a user_user_id=<?=$user_user_id?> id="user_click_id" class="follow">Follow</a>

取消按钮上的属性

   <a user_unfollow_id=<?=$user_user_id?> id="remove_user_click_id" class="unfollow">Unfollow</a>

所以我的问题是让他们只有在成功后才能在follow和unfollow之间切换，同时保持突出显示的属性，我可以更改类和文本，但是“user_unfollow_id”到“user_user_id”就是我遇到的问题改变。也许我只是错过了一些东西..请向正确的方向迈出任何一步。

Answer 1

只是一个警告，下面的所有代码都是未经测试的......

你的两个jQuery函数几乎完全相同。要保持DRY，为什么不将所有内容合并为一个？

使用一个充当切换按钮的按钮，而不是使用两个不同的按钮。打开或关闭。

  <a data-state="not-followed" user_user_id=<?=$user_user_id?> id="user_click_id" class="follow">Follow</a>

当用户点击关注链接时，可能会发生以下几件事情：

在你的js中，检查数据状态的值。如果它是“未遵循”，那么我们处理一个跟随请求。如果“跟随”，那么我们会发出取消关注请求。我们可以在每次按下后修改链接中的值：

$("body").delegate("#user_click_id","click",function(event){

    event.preventDefault();

    var user_user_id = $(this).attr("user_user_id");
    var state = $(this).data('state'); // get the state from the data attribute

    $(".overlay").show();

    $.ajax ({
        url: "action.php",
        method : "POST",
        data:{
            state: state,
            userFollow:1,
            user_insert_id: 1, // not sure what this is for
            user_new_id: <?=$user_user_id>
        },
        success: function(data){
            $("#follow_msg").html(data);
            $(".overlay").hide();
            count_user_following();

            // now update the link
            $(this).text(state == 'followed' ? 'unfollow' : 'follow');
            // and update the data-state attribute
            $(this).data('state',state == 'followed' ? 'not-followed' : 'followed')
        }
    })
})

因此，您将关注和取消关注请求发送到同一个地方。然后，当请求到达服务器时，只需检查state是“跟随”还是“取消关注”，并使用已发送的其他变量执行相应的操作。

更改关注按钮的属性以取消关注ajax上的按钮属性

1 个答案: