Question

当用户在文本框中输入值时，我正在尝试更新标签。当用户更改了滑块条值时，我设法让标签更新，但是当文本框发生变化时，我没有技巧让它更新。

我试着编写一些代码，但它看起来并不正确，sombody可以帮我一把吗？

我试过的代码

  $("#MonthlyRent").text({
                textchange: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

捕捉变化的功能

$(document).ready(function () {
            $("#slider").slider({
                range: "min",
                animate: true,
                value: 1,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    update(1, ui.value + '%'); //changed
                }
            });

            $("#slider2").slider({
                range: "min",
                animate: true,
                value: 1,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

            $("#MonthlyRent").text({
                slide: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

            //Added, set initial value.
            $("#amount").val(0);
            $("#duration").val(0);
            $("#amount-label").text(0);
            $("#duration-label").text(0);
            $("MonthlyRent").text(0);
            update();
        });

更新功能

 function update(slider, val) {
            //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
            var $amount = slider == 1 ? val : $("#amount").val();
            var $duration = slider == 2 ? val : $("#duration").val();
            var $rent = $("#MonthlyRent").val();
            var $amount2 = $amount.replace('%', '');

            /* commented
            $amount = $( "#slider" ).slider( "value" );
            $duration = $( "#slider2" ).slider( "value" );
             */
            $total = "£" + ($amount2 + $rent);
            $("#amount").val($amount);
            $("#amount-label").text($amount);
            $("#duration").val($duration);
            $("#duration-label").text($duration);
            $("#total").val($total);
            $("#total-label").text($total);

            $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
            $('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
        }

Answer 1

使用事件更改或加密：

$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })

如果没有HTML代码，我猜测您的输入类似<input type="text" id="mytextinput" />，但如果不是，则应提供更多信息。

Answer 2

要检测文本框的更改，请使用以下

http://jsfiddle.net/SrhYh/

$('#example').change(function() {
    update();
});

function update() {
    $('#result').text($('#example').val());
}

作为替代方案听取密钥

$('#example').keyup(function() {
    update();
});

function update() {
    $('#result').text($('#example').val());
}

http://jsfiddle.net/SrhYh/1/

当输入框具有新值时，如何更新标签

2 个答案: