用户更改文本框后,无法以编程方式更改文本框的值

时间:2015-02-25 17:03:13

标签: javascript jquery

考虑以下小提琴:http://jsfiddle.net/danashurst/36mx3537/

HTML:

<table>
<tr>
    <td>1 -</td>
    <td>
        <input id="1" class="primaryChannel" type="text" value="9">
    </td>
</tr>
<tr>
    <td>2 -</td>
    <td>
        <input class="channelValue" type="text" value="-4">
    </td>
</tr>
<tr>
    <td>3 -</td>
    <td>
        <input class="channelValue" type="text" value="5">
    </td>
</tr>
</table>

使用Javascript:

        filterInt = function (value) {
        if (/^(\-|\+)?([0-9]+|Infinity)$/.test(value)) return Number(value);
        return 0;
    }

    $('.channelValue').each(function () {
        var elem = $(this);

        // Save current value of element.
        elem.data('oldVal', elem.val());

        // Look for changes in the value.
        elem.bind("propertychange change click keyup input paste", function (event) {
            // If value has changed...
            if (elem.data('oldVal') != elem.val()) {
                // Calculate the difference between the old and the new value.
                var difference = elem.data('oldVal') - elem.val();

                // Updated stored value.
                elem.data('oldVal', elem.val());

                // Remove the difference from the first textbox.                
                $('.primaryChannel').attr("value", filterInt($('.primaryChannel').val()) + difference);

            }
        });
    });

当用户更改文本框2或3的数值时,更改的差异将反映在文本框1上。

但是,当用户更改文本框1的值时,则更改值2或3 - 然后似乎没有任何内容发生 - 文本框1不会更改。

有人能提出一种方法可以实现这个目标吗?

1 个答案:

答案 0 :(得分:2)

您使用的是.attr('value', someValue),但值属性设置默认值,而不是当前值。

设置值属性。使用.val(someValue).prop('value', someValue)