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

我希望我可以使用以下内容来应用“不要重复自己”（DRY）原则：

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开头的任何ID元素。

注意：此选择器比纯ID选择器慢一点 - 但更容易阅读和维护（如果您可以使用标签选择器限定它，它会更快一点）。

Answer 2

在你的情况下，这将是最好的：

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

但您可能希望听到它不起作用的原因：这是因为JavaScript将tmp var绑定到更大的范围。

以下代码有效，因为我们将tmp的当前值显式绑定到正在创建的新函数：

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

    var tmp = 'iinp' + i;

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

Answer 3

请勿使用带编号的ID。

而是使用一个类。

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

Answer 4

<强> 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 5

假设您的每个输入都具有相同的类，或者是相同的元素类型（如input），您可以使用选择器和on()函数将它们全部分配给同一个函数，并将元素的id传递给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 6

其余的答案将按照您的意愿行事，但我个人会更进一步减少匿名函数的数量（尽管有些方法不会这样做）：

使用输入法

<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")

效率会更高（如果你担心的话）。

调用具有常量的函数时如何避免DRY问题？

6 个答案: