JS для каждой замены функции ручного копирования

0

Я ищу способ автоматизировать этот выбор.

Например, у меня будет 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);
        });

    });
  • 1
    TADA: $(".myCommonClass") или $("#MyFormId").on("keyup",".myClass", function(){});
  • 0
    Будет ли разметка или сценарий может добавить все входные данные?
Показать ещё 1 комментарий
Теги:
each

5 ответов

4
Лучший ответ

Вы можете справиться с этим, используя селектор с общим классом для всех ваших атрибутов элемента и данных, чтобы знать элемент и связанные элементы.

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/

Поделиться
  • 0
    При правильной настройке работает нормально ... jsfiddle.net/8KgTk/2
  • 0
    прости за мою ошибку
Показать ещё 2 комментария
1

Может быть, это...

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;
}
Поделиться
  • 0
    +1 для упрощения кода
0

Вы можете сделать это, не добавляя дополнительные атрибуты, если хотите.

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

Однако решение Ирвина Доминина, похоже, решение Эдварда неплохо.

Поделиться
0

Вы должны иметь возможность выполнять функцию .each с помощью jQuery и сделать элементы одного класса.

такие как:

<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
}
Поделиться
0

Здесь разрешение, которое не требует дополнительной разметки, и не использует конкатенацию строк для логики. Он использует $.proxy() чтобы получить правильное определение области.

скрипка

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню