如何使用引導和jQuery

Question

需增加和基於我的文本框的值bootstrapaddClass和removeClass刪除我使現場更改按鈕。任何人都可以給我一些建議，如何做到這一點？

JsFiddle

$(document).ready(function() { 
    $("#submitted").click(function() { 
     var text = $("#answer").val(); 
     var comparingText = "7"; 
     if (text == comparingText) { 
      $('#submitted').removeClass('disabled'); 
     }else{ 
      $('#submitted').removeClass('btn-primary'); 
      $('#submitted').addClass('btn-warning'); 
     } 
    }); 
}); 

<span>6 + 1 = </span><input style="width: 50px;" type="text" id="answer" value="" placeholder="" style="display: block;" /> 
<input class="btn btn-primary disabled" type="submit" id="submitted" name="submitted" value="Submit" /> 

編輯選擇的解決方案

$(document).ready(function() { 
    $('#submitted') 
     .toggleClass('btn-danger disabled'); 

    $("#answer").keyup(function() { 
    var text = $(this).val(); 
    var comparingText = "7"; 
    var valid = text == comparingText; 

     $('#submitted') 
      .toggleClass('btn-primary', valid) 
      .toggleClass('btn-danger disabled', !valid); 

    }); 
}); 

Answer 1

你可以嘗試使用：

$(document).ready(function() { 
    $("#answer").keyup(function() { 
     var text = $(this).val(); 
     var comparingText = "7"; 
     var valid = text == comparingText; 

     $('#submitted') 
      .toggleClass('btn-primary', valid) 
      .toggleClass('btn-danger disabled', !valid); 

    }); 
}); 

Answer 2

你可以使用$ .change（）事件偵聽器：

$(document).ready(function(){ 
 
    
 
    // listen for change to #submitted element 
 
    $('#answer').change(function(){ 
 
// things to do on change 
 

 
if ($('#answer').val() === '7'){ 
 
    // things to do if the #answer text is 7 
 
    $('#submitted').removeClass('disabled'); 
 
} else { 
 
    // things to do if the #answer text is not 7 
 
$('#submitted').addClass('disabled'); 
 
}; 
 
    }); 
 
});

Answer 3

或者乾脆你可以改變你的代碼：

$(document).ready(function() { 
    $("#answer").keyup(function() { 
    var answer = $("#answer").val(); 
    var comparingText = 7; 
    if (answer == comparingText) { 
    $('#submitted').toggleClass('btn-primary').toggleClass('btn-danger disabled'); 
    } else { 
    $('#submitted').toggleClass('btn-primary',false).toggleClass('btn-danger disabled',true); 
    } 
    }); 
});