Question

我正在尝试使用jQuery将几个输入字段绑定到span元素。例如，我有2个带整数值的输入字段。整数值的总和显示在span元素中。现在，当修改其中一个输入字段时，span元素应该始终更新（因为这是在jquery中使用.keyup（）事件）。我有一个有效的解决方案。但在我看来，这是一个跛行的解决方案。所以我想知道你会怎么做。提前谢谢。

此处代码为：http://jsfiddle.net/SJAwb/2/

干杯沃尔夫冈

Answer 1

你有什么理由不能这样做：

$('input[type="text"]').on('keyup', function(e) {
    if (e.which === 13) e.preventDefault();
    var span = $(this).nextAll('span').first(),
        val = this.value,
        mult = $('#'+span.data("multiplier")).val();
    span.html(( parseFloat(val, 10) * parseFloat(mult, 10) ));
});

FIDDLE

Answer 2

您应该使用类选择器而不是ID选择器。

添加所有输入框值并乘以乘数值..演示中的div仅用于显示而不是真正需要。

请参阅下面的方法，

DEMO： http://jsfiddle.net/SJAwb/8/

<强> JS：

$('.listener').each(function () {
    var element = $(this),
        dataBound = $(this).data('bound'),
        dataMultiplier = $(this).data("multiplier"),
        val;

    $('.' + dataBound).on('keyup', {db: dataBound, dm: dataMultiplier}, function (event) {
        /* block ENTER key stroke */
        if (event.which === 13) {
            event.preventDefault();
        }

        /* calculate result */
        val = 0;

        $('.' + event.data.db).each(function (idx, el) {
            val += parseFloat (el.value, 10);
        });

        val = val * parseFloat($('.' + event.data.dm).val());

        if (isNaN(val)) {
          element.html("Please enter a valid number");
        } else {
          element.html(val);
        }
    });
});

使用javascript中的侦听器将输入字段链接在一起

2 个答案: