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

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