成功時のボタンクラスを変更するajaxの結果

Question

ボタンとスパンを使用します。ボタンがクリックされると、結果が成功すると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"); 

       } 
      });   
    }); 

Answer 1

あなたの問題は、この行である：

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

反転削除し、クラスを追加します。

$（ "＃チェック"）removeClass（ 'BTN-ブロックBTN BTN-危険' ）.addClass（ 'btn btn-success btn-block'）;

スニペット：

$(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>

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