我想知道是否有人可以請幫助我一個jQuery腳本。我正在使用MVC 2.通過添加文本框的值更新jQuery中的標籤
我有2個文本框。當值輸入到文本框中時,這些值的總和應顯示在用戶鍵入的標籤控件中。因此,如果頁面加載,則文本框爲空,因此標籤也必須爲空(空白)。當用戶鍵入一個像10那樣的值時,應該在標籤中顯示10。如果用戶輸入5到另一個文本框中,則應該顯示15。如果用戶清除2個文本框,則標籤應該再次變爲空白。
我希望有人能幫助這裏:)
感謝
我想知道是否有人可以請幫助我一個jQuery腳本。我正在使用MVC 2.通過添加文本框的值更新jQuery中的標籤
我有2個文本框。當值輸入到文本框中時,這些值的總和應顯示在用戶鍵入的標籤控件中。因此,如果頁面加載,則文本框爲空,因此標籤也必須爲空(空白)。當用戶鍵入一個像10那樣的值時,應該在標籤中顯示10。如果用戶輸入5到另一個文本框中,則應該顯示15。如果用戶清除2個文本框,則標籤應該再次變爲空白。
我希望有人能幫助這裏:)
感謝
$('#textbox1, #textbox2').keyup(function() {
$('#label').html('');
var val1 = $('#textbox1').val();
var val2 = $('#textbox2').val();
if(!isNaN(val1) && !isNaN(val2)) {
$('#label').html(parseInt(val1, 10) + parseInt(val2, 10));
}
});
UPDATE
爲了適應您的評論,請參閱下面的變化。做了這個改變之後,我開始傾向於Reigel的答案,但也許修改0
的結果總是被表示爲一個空字符串。
$('#textbox1, #textbox2').keyup(function() {
$('#label').html('');
var val1 = $('#textbox1').val();
var val2 = $('#textbox2').val();
if(!isNaN(val1) || !isNaN(val2)) {
$('#label').html((parseInt(val1, 10) || 0) + (parseInt(val2, 10) || 0));
}
});
$("#textBox1").keydown(function(event) {
updateLabel();
});
$("#textBox2").keydown(function(event) {
updateLabel();
});
function updateLabel()
{
var val = 0;
if(isNaN($("#textBox1").val()) && isNaN($("#textBox1").val()))
{
$("#myLabel").val("");
return;
}
if(!isNaN($("#textBox1").val()))
val += $("#textBox1").val();
if(!isNaN($("#textBox2").val()))
val += $("#textBox2").val();
$("#myLabel").val(val);
}
$(document).ready(function() {
$('#num1, #num2').keyup(function(){
var num1 = parseInt($('#num1').val(),10) || 0;
var num2 = parseInt($('#num2').val(),10) || 0;
$('label.sum').text((num1 + num2)|| '')
});
});
這使得很多假設。任何可以是'parseInt':d的將是,而任何不能被視爲'0'的。因此''a1'+'1a''會產生'1'。這也不能區分結果'0'是一個錯誤的結果。因此''1'+'-1''產生'''''。 – 2010-10-06 09:00:19
哦,原來我提到的第一個假設似乎是OP想要的:) – 2010-10-06 09:42:57
感謝。我是jQuery的新手。這段代碼是否必須在$(document).ready(function(){})中? – 2010-10-06 08:40:43
@Brendan Vogt:它通常是附加所有事件處理程序的最佳位置(例如'keyup'),所以我會將它放在'$(document).ready()'函數體中 – 2010-10-06 08:53:06
@Brendan :是的,將它放入該函數意味着代碼不會被執行,直到DOMReady事件被觸發,這是您第一次保證有權訪問頁面中的所有DOM節點。將任何訪問DOM節點的東西推遲到DOMReady總是最佳實踐。 – 2010-10-06 08:56:56