如何用jQuery实现状态切换后按钮颜色同步变更

问题 #

切换按钮状态后，按钮文字变化但颜色不变，需刷新页面才会更新颜色。

原Blade代码 #

@if ($users->verified == 1)
    <p class="UpdateSectionStatuss btn btn-success me-3 h-50 mt-5 " id="user-{{ $users->id }}"
        user_id="{{ $users->id }}" href="javascript:void(0)">Verified</p>
@else
    <p class="UpdateSectionStatuss btn btn-danger me-3 h-50 mt-5 " id="user-{{ $users->id }}"
        user_id="{{ $users->id }}" href="javascript:void(0)">Un-Verify</p>
@endif

原Script代码 #

$(".UpdateSectionStatuss").click(function() {
    var verified = $(this).text();
    var user_id = $(this).attr("user_id");
    $.ajax({
        type: 'POST',
        url: "{{ URL::to('User_profile_status') }}",
        data: {
            verified: verified,
            user_id: user_id
        },
        success: function(res) {
            if (res['Verified'] == 0) {
                $("#user-" + user_id).html(
                    "<p class='UpdateSectionStatuss' href='javascript:void(0)'> Un-Verify </p>"
                )
            } else if (res['Verified'] == 1) {
                $("#user-" + user_id).html(
                    "<p class='UpdateSectionStatuss' href='javascript:void(0)'> Verified </p>"
                )
            }
        },
        error: function() {
            alert("Error");
        }
    });
});

问题原因 #

AJAX成功回调里更新HTML时，只保留了UpdateSectionStatuss类，丢失了控制颜色的btn-success/btn-danger以及其他布局类，导致样式未同步更新。

修复方案（推荐简洁版） #

直接修改当前按钮的文本和类名，无需重新生成DOM元素：

$(".UpdateSectionStatuss").click(function() {
    var $btn = $(this);
    var verified = $btn.text().trim();
    var user_id = $btn.attr("user_id");
    
    $.ajax({
        type: 'POST',
        url: "{{ URL::to('User_profile_status') }}",
        data: {
            verified: verified,
            user_id: user_id
        },
        success: function(res) {
            if (res['Verified'] == 0) {
                $btn.text("Un-Verify");
                $btn.removeClass("btn-success").addClass("btn-danger");
            } else if (res['Verified'] == 1) {
                $btn.text("Verified");
                $btn.removeClass("btn-danger").addClass("btn-success");
            }
        },
        error: function() {
            alert("Error");
        }
    });
});

另一种修复方式（重新生成完整HTML） #

如果需要重新构建元素，确保包含所有必要的类和属性：

$(".UpdateSectionStatuss").click(function() {
    var verified = $(this).text().trim();
    var user_id = $(this).attr("user_id");
    
    $.ajax({
        type: 'POST',
        url: "{{ URL::to('User_profile_status') }}",
        data: {
            verified: verified,
            user_id: user_id
        },
        success: function(res) {
            var target = $("#user-" + user_id);
            if (res['Verified'] == 0) {
                target.html(`<p class='UpdateSectionStatuss btn btn-danger me-3 h-50 mt-5' href='javascript:void(0)' user_id='${user_id}'>Un-Verify</p>`);
            } else if (res['Verified'] == 1) {
                target.html(`<p class='UpdateSectionStatuss btn btn-success me-3 h-50 mt-5' href='javascript:void(0)' user_id='${user_id}'>Verified</p>`);
            }
        },
        error: function() {
            alert("Error");
        }
    });
});

内容的提问来源于stack exchange，提问作者Nakvi