Как избежать проблемы СУХОГО при вызове функции с константой?

Question

Я все еще новичок в Javascript. Мне нужно прикрепить функцию для обработки событий в некоторых моих HTML-элементах.

Я делаю следующее:

$('#iinp0').keyup(function(){keyReleased('iinp0');});
$('#iinp1').keyup(function(){keyReleased('iinp1');});
$('#iinp2').keyup(function(){keyReleased('iinp2');});
$('#iinp3').keyup(function(){keyReleased('iinp3');});
$('#iinp4').keyup(function(){keyReleased('iinp4');});
$('#iinp5').keyup(function(){keyReleased('iinp5');});
$('#iinp6').keyup(function(){keyReleased('iinp6');});
$('#iinp7').keyup(function(){keyReleased('iinp7');});

Я надеялся, что смогу применить принцип «Не повторяйся (СУХОЙ)» со следующим:

for (i=0;i<=7;i++) {

    var tmp = 'iinp' + i;
    $('#'+tmp).keyup(function(){keyReleased(tmp);});

}

но keyReleased() не вызывается с правильными значениями.

Есть ли решение этой проблемы? Я имею в виду, есть ли простой способ присоединить мои функции с постоянным параметром?

Answer 1

Почему бы просто:

$('#iinp0, #iinp1, #iinp2, #iinp3, #iinp4, #iinp5, #iinp6, #iinp7').keyup(function()
{
    keyReleased(this.id);
});

---

Вы даже можете заменить этот длинный селектор на селектор атрибута:

$('[id^=iinp]').keyup(function()
{
    keyReleased(this.id);
});

, который выберет любой элемент, идентификатор которого начинается сiinp.

Примечание: Этот селектор немного медленнее, чем селекторы с чистым идентификатором - но его гораздо проще читать и поддерживать (если вы можете квалифицировать его с помощью селектора тегов, онбудет немного быстрее).

Answer 2

В вашем случае это было бы лучше:

$('[id^="iinp"]').keyup(function()
{
    keyReleased(this.id);
});

Но вам может понравиться причина, по которой это не работает: это потому, что JavaScript связывает tmp переменную с большей областью действия.

Следующий код работает, потому что мы явно привязываем текущее значение tmp к создаваемой новой функции:

for (i=0;i<=7;i++) {

    var tmp = 'iinp' + i;

    $("#"+tmp).keyup((function(xtmp){ return function(){keyReleased(xtmp);} })(tmp));
}

Answer 3

Остальные ответы будут делать то, что вы хотите, но лично я бы пошел еще дальше, чтобы уменьшить количество выполняемых анонимных функций (хотя некоторые подходы этого не сделают):

Используйте классы для ввода

<input class="keyup" id="iinp01" />

Привязка с использованием класса и неанонимного обработчика событий

(function ($) { // closure

    $(function () { // on document ready
        $("input.keyup").keyup(keyReleased);
    });

    function keyReleased(e) {
        var id = this.id,
            $input = $(this);

        // Do whatever you want
    }

})(jQuery);

Надеюсь, это поможет.Если вы не знакомы с замыканиями, узнайте о них!

Если возможно, я бы также предоставил родительский элемент для контекста:

<div id="keyup-container"><!-- inputs here --></div>

$("#keyup-container input.keyup")

Это будет более эффективно (если выбеспокоюсь об этом).

Answer 4

Предполагая, что каждый из ваших входов имеет один и тот же класс или одинаковый тип элемента (например, input), вы можете назначить их всем одной и той же функции, используя селектор и функцию on(), и передать идентификатор элемента для функции keyReleased():

Пример HTML:

<div id="formData">
    <input type="text" id="iinp0" \>
    <input type="text" id="iinp1" \>    
</div>

jQuery JavaScript:

$("#formData").on("keyup", "input", function() {
    keyReleased($(this).attr('id')); 
});

http://jsfiddle.net/4SKgU/

Answer 5

HTML

<input class="input" id="iinp0" />
<input class="input" id="iinp1" />
<input class="input" id="iinp2" />

JS

$(function(){
    $('.input').keyup(function() {
        keyReleased(this.id.replace('iinp', ''));
    });
    function keyReleased(key) {
        console.log(key)
    }
})

Answer 6

Не используйте пронумерованные идентификаторы.

Вместо этого используйте класс.

$('.iinp').keyup(function() {
  var index = $(this).index('.iinp');
  keyReleased('iinp', index);
});