JS Toggle類

Question

我被困在這。我有一個ajax函數發佈到php。帖子功能工作正常。我只想讓css在每次點擊發布的同時進行每次點擊切換。

當我第一次點擊'.fav-btn'按鈕時，我想'fav-h'被添加到樣式類中。也張貼到PHP腳本。

當我第二次點擊'.fav-btn'按鈕時'fav -h'被刪除，按鈕返回到原始樣式。再次發佈到PHP腳本。

我已經嘗試過各種東西，包括.remove類。我的代碼如下，我不確定如何獲得fav-h類風格，以便在第二次點擊時將其刪除。

$(document).ready(function(){ 
 
     var pageID = <?php echo $pageID ?>; 
 
\t \t var user_id = <?php echo $user_id ?>; 
 

 
     $('.fav-btn').click(function(){ 
 
      $(this).addClass('fav-h'); 
 
      $.ajax({ 
 
       type:"POST", 
 
       url:"../ajax.php", 
 
\t \t \t \t data: { act: 'fav', pageID: pageID, user_id: user_id }, 
 
       success: function(){ 
 
       } 
 
      }); 
 
     }); 
 
}); 
 

 
$(document).ready(function(){ 
 
     var pageID = <?php echo $pageID ?>; 
 
\t \t var user_id = <?php echo $user_id ?>; 
 

 
     $('.fav-btn fav-h').click(function(){ 
 
      $('.fav-btn fav-h').removeClass('fav-h');  
 
      $.ajax({ 
 
       type:"POST", 
 
       url:"../ajax.php", 
 
\t \t \t \t data: { act: 'fav', pageID: pageID, user_id: user_id }, 
 
       success: function(){ 
 
       } 
 
      }); 
 
     }); 
 
});

Answer 1

使用$.toggleClass()只是有一個代碼塊：

$(document).ready(function(){ 
    var pageID = <?php echo $pageID ?>; 
    var user_id = <?php echo $user_id ?>; 

    $('.fav-btn').click(function(){ 
     $(this).toggleClass('fav-h'); 
     $.ajax({ 
      type:"POST", 
      url:"../ajax.php", 
      data: { act: 'fav', pageID: pageID, user_id: user_id }, 
      success: function(){} 
     }); 
    }); 
}); 

PS：你的代碼是行不通的，因爲你用$('.fav-btn fav-h')：

<div class="fav-btn"> 
    <fav-h></fav-h> <!-- This is what this selector leads to --> 
</div> 

而不是正確的選擇$('.fav-btn.fav-h')：

<div class="fav-btn fav-h"></div> <!-- Found the right one! --> 

Answer 2

它看起來是一樣的Ajax調用兩種方式。你可能只需綁定一次按鈕。另外，如果帖子成功，您可能只想更新該類。

$(document).ready(function(){ 
    var pageID = <?php echo $pageID ?>; 
    var user_id = <?php echo $user_id ?>; 

    $('.fav-btn').on('click', function(){ 
     var $t = $(this); 
     $t.addClass('fav-saving'); 
     $.ajax({ 
      type:"POST", 
      url:"../ajax.php", 
      data: { act: 'fav', pageID: pageID, user_id: user_id }, 
      success: function(){ 
       $t.toggleClass('fav-h'); 
      }, 
      complete: function(){ 
       $t.removeClass('fav-saving'); 
      } 
     }); 
    }); 
});