javascript - 如何为我的 jQuery 选择器动态构建元素 ID？

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？如果是，最好的方法是为这些元素设置类属性。
这样你就可以这样做：

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