javascript - JS 切换类

Question

我被困在这个问题上。我有一个 ajax 函数发布到 php.帖子功能运行良好。我只是希望 css 在每次点击时打开和关闭，同时在每次点击时发布。

当我第一次单击“.fav-btn”按钮时，我希望将“fav-h”添加到类中以进行样式设置。同时发布到 php 脚本。

当我第二次单击“.fav-btn”按钮时，我希望删除“fav-h”并且按钮返回到原始样式。同时再次发布到 php 脚本。

我尝试过各种方法，包括 .removeclass。我的代码如下，我不确定如何在第二次单击时删除 fav-h 类样式。

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

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

$(document).ready(function(){ 
        var pageID = <?php echo $pageID  ?>; 
		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",
				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! -->