使用AJAX / JQUERY和PHP首次單擊后如何使按鈕可重用

Question

我已經使用PHP構建了一個跟隨/取消關注Twitter的系統。 在這個論壇的幫助下，我成功地創建了一個動態按鈕，允許您“跟隨”或“取消關注”每個用戶，使用AJAX / JQUERY在后面運行PHP / MySQL代碼，避免在動作發生時刷新頁面。 問題是我只能在后台運行一次這個腳本。 假設一個用戶錯誤地取消了一個成員（我的AJAX / JQUERY腳本對此沒有任何問題），但是后來想再次關注他，這就是我被困住的地方。 必須刷新頁面才能實現此目的。 我知道這是由於我正在使用的PHP動態數據，正如您將在我的代碼中看到的那樣。

在PHP代碼中運行迭代，輸出數據庫中的所有成員。 我在這里輸出（為簡單起見）只是成員的名字和每個人的跟隨/取消關注按鈕。 php變量$what_class是PHP函數的結果，該函數查看數據庫以確定用戶是否關注該成員。 $what_class將輸出“ $what_class ”的字符串“follow”，因此可以定義類，然后由兩個Jquery腳本中的任何一個進行定位。

PHP代碼

<?php  foreach($members as $member){ ?>
 <p class="member_name"><?php echo $member->name; ?></p>
 <button class="<?php echo $what_class; ?>" type="button" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" ><?php echo $what_class; ?></button>
<?php } ?>

下面是JQUERY腳本，如前所述，按鈕類將由PHP通過$what_class定義。 這是第一次嘗試重新使用按鈕時的問題，除非刷新頁面，否則不會在PHP的$what_class更改類。 我嘗試使用$(this).removeClass('unfollow').addClass('follow')使用Jquery更改類，並讓按鈕可以重用但不起作用。

JIFERY SCRIPTS跟隨UNFOLLOW

<script type="text/javascript">
    $(document).ready(function() {
       $("button.unfollow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');
            $.get("follow_actions.php", {unfollow_id:memberId, user_id:userId} , function(data) {
           });
            $(this).html('follow');
            $(this).removeClass('unfollow').addClass('follow');

       });
   });
   </script>

        <script type="text/javascript">
    $(document).ready(function() {
       $("button.follow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');
            $.get("follow_actions.php", {follow_id:memberId, user_id:userId} , function(data) {
           });
           $(this).html('unfollow');
           $(this).removeClass('follow').addClass('unfollow');

       });
   });
   </script>

有沒有人知道如何在不重新加載頁面的情況下完成可重復使用的按鈕？ 我提前謝謝你。

Answer 1

上一個答案：

我為這種情況做的是有兩個按鈕。 一個將顯示給用戶，另一個將被隱藏。

<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>

只需調整你的PHP代碼顯示什么和不顯示什么。

單擊按鈕時，隱藏此按鈕並顯示另一個按鈕。

$(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 */
  });

});

檢查這個JSfiddle 。

更新：

我們可以使用jQuery的toggleClass() 。

<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";
    });
  }); 
});

檢查這個JSfiddle 。

Answer 2

使用<button class="followUnfollow <?php echo $what_class; ?>"

您需要盡可能少地編寫代碼。 有一個公共類，如followUnfollow ，然后使用jQuery中的hasClass函數檢查此元素中是否存在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>