Question

我正在寻找自动选择的方法。

例如，我将有10个双输入（总共20个输入），我不想为每个输入编写JS脚本，只需使用 each（）函数（我愿意不同的方式）并且只声明选择器。

JsFiddle： http://jsfiddle.net/vs7fa/

点子：

var SELECTORS_H = array();

$.each(SELECTORS_H){

    $('SELECTOR_H').keyup(function () {
        // do magic
        $('SELECTOR_V').val(num);
    });

    $('SELECTOR_V').keyup(function () {
        // do magic
        $('SELECTOR_H').val(num);
    });
}

HTML：

<label for="h_one">H_ONE:</label>
<input type="text" name="h_one">

<label for="v_one">V_ONE:</label>
<input type="text" name="v_one">

会有更多的投入。模式是：

h_one, v_one
h_two, v_two
h_something, v_something
...

JS：

$(function() {

        $('input[name="h_one"]').keyup(function() {
            var one = $(this).val();
            if (one > 0) {
                var num = Math.abs(one) * -1;
            }
            else {
                var num = Math.abs(one) * 1;
            }
            $('input[name="v_one"]').val(num);
        });

        $('input[name="v_one"]').keyup(function() {
            var two = $(this).val();
            if (two > 0) {
                var num = Math.abs(two) * -1;
            }
            else {
                var num = Math.abs(two) * 1;
            }
            $('input[name="h_one"]').val(num);
        });

    });

Answer 1

您可以使用带有所有元素和数据属性的公共类的选择器来处理此问题，以了解元素和链接元素。

HTML：

<label>H_ONE:</label>
<input type="text" class="handler" data-id="h1" data-link="v1" />
<br>
<label>V_ONE:</label>
<input type="text" class="handler" data-id="v1" data-link="h1" />

代码：

$(function () {
    $('.handler').keyup(function () {
        var one = $(this).val();
        if (one > 0) {
            var num = Math.abs(one) * -1;
        } else {
            var num = Math.abs(one) * 1;
        }
        $('input[data-id=' + $(this).attr("data-link")+']').val(num);
    });
});

演示：http://jsfiddle.net/8KgTk/

Answer 2

可能是这个......

Jsfiddle：http://jsfiddle.net/vs7fa/3/

$('input[name="h_one"]').keyup(function () {
    var num = DoMagic($(this));
    $('input[name="v_one"]').val(num);
});

$('input[name="v_one"]').keyup(function () {
    var num = DoMagic($(this));
    $('input[name="h_one"]').val(num);
});

function DoMagic(element) {
    var one = $(element).val();
    if (one > 0) {
        var num = Math.abs(one) * -1;
    } else {
        var num = Math.abs(one) * 1;
    }
    return num;
}

Answer 3

您应该能够通过使用jQuery并使项目成为同一类来执行.each函数。

如：

<label class="forElement" for="h_one">H_ONE:</label>
<input class="inputElement" type="text" name="h_one">

<label class="forElement"for="v_one">V_ONE:</label>
<input class="inputElement" type="text" name="v_one">

$('.forElement').each( function() {
  //some code
}

Answer 4

如果需要，您可以在不添加额外属性的情况下执行此操作。

$(function () {
    $('input[name^="h_"], input[name^="v_"]').keyup(function () {
        var one = $(this).val();
        var num = - one;
        var inputType = $(this).attr("name").substr(0,1);
        var inputNumber = $(this).attr("name").substr(2);
        $('input[name="'+(inputType == 'v' ? 'h' : 'v')+'_' + inputNumber + '"]').val(num);
    });
});

然而，Irvin Dominin又称Edward的解决方案非常好。

Answer 5

这是一个不需要额外标记的解决方案，并且不使用字符串连接作为逻辑。它使用$.proxy()来获得正确的范围。

Fiddle

JS为每个替换手动复制功能

5 个答案: