使用jQuery根據文本框值更改div值

Question

我創建了該div，根據您的下拉列表選項更改div的值。 http://jsfiddle.net/qSkZW/20/

我想更進一步，這是爲了創建一個文本框字段，如果你添加例如數字2它會改變div值爲240（實際上你在腳本中會發現120是一個PHP變種）。如果它寫入3然後到360.

此外，必須有兩個限制。

1. 防止他們使用非數字字符。
2. 最大數量是預先配置的（來自php變量）。如果最大值設置爲10，如果用戶寫入30，它將返回到10.

感謝您的幫助。

Answer 1

好了，第一，創建一個文本框（例如ID =「文本框」），然後修改你的聽衆的行動

$("#quantity").change(function() { 
    var price = parseInt($(this).val(), 10)*120 
    $("#textfield").attr('value="'+price+'"'); 
    # sets the default value of #textfield to the selection from #quantity 
    }) 
.change() 

$("#textfield").blur(function() { 
# when the element looses focus (they click/tab somewhere else) 
     var valid = /^\d{2}$/; 
     # this means any 2 numbers. change {2} to {3} or however many digits. 
     # you can also also use d[0-10] to identify a range of numbers. 

    if ($(this).text() != valid) { 
     $("#message").text("Only numbers please!"); 
     $("#message").fadeIn(); 
     # add <span id="message" style="display:none;"></span> next to #textfield 
     # enclose #textfield & #message in the same element (like <li> or <div>) 
    } 
    else { 
     $("#message").fadeOut(); 
    } 
}); 

能否請您提供更多關於＃2（我沒有清楚瞭解應該發生什麼）

快速問題：你爲什麼試圖把價格放在一個可編輯的元素？

Answer 2

var max = 30; 
$('input').keyup(function() { 
    var v = $(this).val(); 
    v = isNaN(v)?'':v; 
    v = v > max ? max : v; 
    $(this).val(v); 
    $('div').html(v * 120); 
}); 

http://jsfiddle.net/vWf2x/2/

Answer 3

這將做到這一點：http://jsfiddle.net/ebiewener/pBeM8/

您綁定，以防止正在進入的不需要的字符keydown事件輸入框，並綁定爲了檢查keyup事件價值&修改div的高度。

$('input').keydown(function(e){ 
    if(!(e.which >= 48 && e.which <=58) && e.which !== 8 && e.which !== 46 && e.which !== 37 && e.which !== 39){ //prevent anything other than numeric characters, backspace, delete, and left & right arrows 
     return false; 
    } 
}) 
.keyup(function(){ 
    val = $(this).val(); 
    if(val > 10){ 
     val = 10; 
     $(this).val(10); 
    } 
    $('div').height(val * 10); 
});