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

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) ));
});

小提琴

Answer 2

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

将所有输入框值相加并乘以乘数。演示中的 div 仅用于展示，并不真正需要。

请参阅下面的方法，

演示：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);
        }
    });
});