我使用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");
}
});
});
答案 0 :(得分:1)
你的问题在这一行:
$("#check").addClass('btn btn-success btn-block').removeClass('btn btn-danger btn-block');
反转删除并添加类:
$(&#34; #check&#34;)。removeClass(&#39; btn btn-danger btn-block&#39;)。addClass(&#39; btn btn-success btn-block&#39; );
摘录:
$(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");
});
});
&#13;
<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>
&#13;
答案 1 :(得分:1)
试试这个,如果你的尺码有问题,也许你有另一个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");
}
});
});
});
});
&#13;
input{
outline: 0!important;
}
&#13;
<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!">
&#13;