JS Toggle Class

Question

我被困在这上面了。我有一个ajax函数发布到PHP。帖子功能运行正常。我只是希望css在每次点击时点击每次点击来打开和关闭。

当我点击＆＃39; .fav-btn＆＃39;按钮第一次我想要＆＃39; fav-h＆＃39;要添加到类中进行样式设置。也发布到php脚本。

当我点击＆＃39; .fav-btn＆＃39;按钮第二次我想要＆＃39; fav-h＆＃39;要删除，按钮返回原始样式。也请再次发布到php脚本。

我尝试过各种各样的东西，包括.removeclass。我的代码如下，我不知道如何在第二次点击时删除fav-h类样式。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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