成功ajax結果更改按鈕類

我使用Bootstrap按鈕和跨度。當按鈕被點擊時，如果結果是成功，我會調用一個ajax函數我想要更改按鈕類，按鈕文本和span類。類正在改變，但不能正常工作。當班級更改時，按鈕大小正在增加。成功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"); 

       } 
      });   
    });

來源

2016-09-06 Hermes

由於該問題涉及您可能要包括CSS – Tibrogargan

你爲什麼要添加和刪除同一類的元素呈現組件？ –

我更改按鈕顏色和跨度圖標。首先，按鈕顏色爲紅色當結果爲成功時，按鈕顏色爲綠色 – Hermes

您的問題是在這條線：

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

來源

2016-09-06 21:48:34 gaetanoM

你是對的類更改，但按鈕文字不會改變 – Hermes

@Hermes現在按鈕文本更改爲「成功」。 – gaetanoM

你是完美的真的非常感謝你，我花了這麼多時間。 – Hermes

試試這個，如果你有問題的大小，也許你有另一個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!">

來源

2016-09-06 21:49:08

非常感謝你的工作，但按鈕文字改變了 – Hermes

成功ajax結果更改按鈕類

回答

相關問題