在成功的ajax结果上更改按钮类答案

【问题标题】：Change button class on success ajax result在成功的ajax结果上更改按钮类
【发布时间】：2023-03-24 23:09:01
【问题描述】：

我使用 Bootstrap 一个按钮和跨度。单击按钮时，如果结果成功，我将调用 ajax 函数我想更改按钮类、按钮文本和跨度类。课程正在改变，但无法正常工作。更改类时，按钮大小会增加。

<button id="check" type="" class="btn btn-danger btn-block"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> Check</button>

        $("#check").click(function(){
        var lat = $('#lat').val();
        var lng = $('#lng').val();  
            $.ajax({
                type: 'post',
                url: 'kds_populate_db2.php?lat='+lat+'&lng='+lng,
                data: {
                    lat:lat,
                    lng:lng
                },
                async: true,
                cache: false,
                success: function(data) {                       
                    $("#check").addClass('btn btn-success btn-block').removeClass('btn btn-danger btn-block');
                    $('#check>span').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
                    $("#check").val("checked");

                }
            });         
    });

【问题讨论】：

由于问题涉及您可能希望包含 css 的演示组件
为什么要在一个元素中添加和删除相同的类？
我更改了按钮颜色和跨度图标。首先按钮颜色为红色当结果成功时按钮颜色为绿色
P.S - 我看不出有什么问题。看到这个Fiddle Demo。
@Hermes - 但是您正在添加类 btn 然后立即将其删除。那没有意义。与btn-block 相同

标签： jquery ajax twitter-bootstrap

【解决方案1】：

你的问题出在这一行：

$("#check").addClass('btn btn-success btn-block').removeClass('btn btn-danger btn-block');

反转删除和添加类：

$("#check").removeClass('btn btn-danger btn-block').addClass('btn btn-success btn-block');

sn-p：

$(function () {
  $('#chengeIt').on('click', function(e) {
    $("#check").removeClass('btn btn-danger btn-block').addClass('btn btn-success btn-block')[0].childNodes[1].textContent = 'Success';
    $('#check>span').removeClass('glyphicon-check').addClass('glyphicon-ok-sign');
    $("#check").val("checked");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="check" type="" class="btn btn-danger btn-block"><span class="glyphicon glyphicon glyphicon-check" aria-hidden="true"></span> Check</button>
<button id="chengeIt" type="button" class="btn btn-primary">Check</button>

【讨论】：

你是对的，类改变了，但按钮文本没有改变
@Hermes 现在按钮文本变为“成功”。
你是完美的真的非常感谢你花了我这么多时间。

【解决方案2】：

试试这个，如果你对尺寸有问题，也许你有另一个 css 与你的按钮冲突。

$(document).ready(function(){
  $(function(){
    $("input").on("click", function(e){
      e.preventDefault();
      
      $.ajax({
        // change complete for success
        complete: function(){
          $("input").removeClass("btn-primary");
          $("input").addClass("btn-danger");
        }
      });
    });
  });
});

input{
  outline: 0!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<input type="button" class="btn btn-primary" value="click me!">

【讨论】：

非常感谢它正在工作，但按钮文本没有改变