Javascript 如何使用AJAX/JQUERY和PHP使按钮在第一次单击后可重用

我使用PHP构建了一个类似于Twitter的follow/unfollow系统。在这个论坛的帮助下，我成功地创建了一个动态按钮，允许您“跟踪”或“取消跟踪”每个用户，使用AJAX/JQUERY在后面运行PHP/MySQL代码，避免在操作发生时刷新页面。问题是我只能在后台运行这个脚本一次。假设一个用户错误地解除了一个成员的跟踪（我的AJAX/JQUERY脚本不会有任何问题），但又想再次跟踪他，这就是我被卡住的地方。必须刷新页面才能实现此操作。我知道这是由于我使用的PHP动态数据造成的，您将在我的代码中看到

在PHP代码中，我运行一个迭代，输出数据库中的所有成员。为了简单起见，我在这里只输出成员的名字和一个follow/unfollow按钮。php变量

$what_class

是php函数的结果，该函数查看数据库以确定用户是否在跟踪该成员

$what_class

将输出“unfollow”的字符串“follow”，这样就可以定义类，然后由Jquery脚本中的任意一个作为目标

PHP代码

有人知道我如何在不重新加载页面的情况下实现一个可重复使用的按钮吗？我提前向您表示感谢。

前面的回答： 对于这种情况，我要做的是有两个按钮。一个将显示给用户，另一个将隐藏

<button class="follow" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Follow</button>
<button class="unfollow" style="display:none" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Unfollow</button>

看看这个

更新： 我们可以使用jQuery

<button class="follow" data-member_id="12" user_id="12">Follow</button>

---

检查此项。

使用

的效果非常好！非常感谢！
<button class="follow" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Follow</button>
<button class="unfollow" style="display:none" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Unfollow</button>

$(document).ready(function(){

  $(".follow").on("click", function(){
    $(".follow").hide(200);
    $(".unfollow").show(200);
    /* PUT YOUR OTHER PROCESSES HERE */
  });

  $(".unfollow").on("click", function(){
    $(".follow").show(200);
    $(".unfollow").hide(200);
    /* PUT YOUR OTHER PROCESSES HERE */
  });

});

<button class="follow" data-member_id="12" user_id="12">Follow</button>

$(document).ready(function(){
  $(".follow, .unfollow").on("click", function(){

    var memberId = $(this).attr('data-member_id');
    var userId = $(this).attr('user_id');

    $(".follow, .unfollow").toggleClass("follow unfollow");
    $(this).text(function(i, text){
          return text === "Follow" ? "Following" : "Follow";
    });
  }); 
});

<script type="text/javascript">
    $(document).ready(function() {
       $("button.followUnfollow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');

            if($(this).hasClass('follow')) { // FOLLOW
                $.get("follow_actions.php", {follow_id:memberId, user_id:userId} , function(data) {
                });
                $(this).html('unfollow');
                $(this).removeClass('follow').addClass('unfollow');
            } else { // UNFOLLOW
                $.get("follow_actions.php", {unfollow_id:memberId, user_id:userId} , function(data) {
                });
                $(this).html('follow');
                $(this).removeClass('unfollow').addClass('follow');
            }
       });
   });
   </script>