Question

我想通过使用循环来减少此代码。我怎样才能做到这一点？

$("#whiteJenisPembayaran1").live('focus', function() {
    $("#whiteJenisPembayaran1").typeahead(typeaheadConfig);
});
$("#whiteJenisPembayaran2").live('focus', function() {   
    $("#whiteJenisPembayaran2").typeahead(typeaheadConfig);
});
$("#whiteJenisPembayaran3").live('focus', function() {
    $("#whiteJenisPembayaran3").typeahead(typeaheadConfig);
});

Answer 1

您可以更改HTML吗？如果是，最好的方法是为这些元素设置 class 属性这样你就可以做到这一点：

HTML：

<div class="whiteJenisPembayaran" id="whiteJenisPembayaran1"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran2"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran3"></div>
<div class="whiteJenisPembayaran" id="whiteJenisPembayaran4"></div>

使用Javascript：

$(".whiteJenisPembayaran").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 2

$("#whiteJenisPembayaran1, #whiteJenisPembayaran2, #whiteJenisPembayaran3").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

现在

或更“正确”的方式：

$(document).on('focus', '#whiteJenisPembayaran1, #whiteJenisPembayaran2, #whiteJenisPembayaran3', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 3

function bindListener(index) {
    var key = '#whiteJenisPembayaran' + index;
    $(key).live('focus', function() {
        $(key).typeahead(typeaheadConfig);
    });
}

var n = 5; // your max
for (var i = 1; i <= n; ++i) {
    bindListener(index);
}

以这种方式完成以防止在循环内绑定事件的闭包问题。

Answer 4

您可以使用属性选择器[id ^ = string]，它将选择ID以字符串开头的所有内容。

$("[id^=whiteJenisPembayaran]").live('focus', function() {
    $(this).typeahead(typeaheadConfig);
});

Answer 5

你可以有一个像这样的所有id的数组：

ids = [ '#whiteJenisPembayaran1', '#whiteJenisPembayaran2', '#whiteJenisPembayaran3' ];

for (i = 0; i < ids.length; i++) {
    $(ids[i]).live('focus', function() {
        $(ids[i]).typeahead(typeaheadConfig);
    });
}

如何动态构建jQuery选择器的元素ID？

5 个答案: