Javascript 使用循环将事件设置为DOM对象

我有一些DOM输入，并向其中添加了一些事件，这些输入如下：

$("#hotel2city").keyup(function(){
    getDestinations($("#hotel2city"));
});

$("#hotel2name").keyup(function(){
    getHotels($("#hotel2city").val(),$("#hotel2name"));
});

这是可行的，我想做的是不要每次重复上面的代码，而是有一个for循环来附加事件。所以我写了一篇生活：

var setControlls = function(){
    for(var i=1; i<=5; i++){
        $("#hotel" + i +"city").keyup(function(){
                getDestinations($("#hotel"+i+"city"));
        });

        $("#hotel"+i+"name").keyup(function(){
            getHotels($("#hotel"+i+"city").val(),$("#hotel"+i+"name"));
        });
    }
}();

var setControlls=function（）{
对于（var i=1；i最好给它一个类，然后给它一个
数据id
或其他什么，这样它就可以扩展了：

HTML:

等等

您遇到的问题是范围，
i
始终是最大的数字。如果您想解决问题，请使用以下方法：

var setControlls = function(){
    for(var i=1; i<=5; i++){
        (function(j){ // Create scope
            $("#hotel" + j +"city").keyup(function(){
              getDestinations($("#hotel"+j+"city"));
            });

            $("#hotel"+i+"name").keyup(function(){
                getHotels($("#hotel"+j+"city").val(),$("#hotel"+j+"name"));
            });
        })(i); // Call scope j=i;
    }
}();

var setControlls=function（）{
对于（var i=1；i使用类将事件添加到所有元素中一次，然后使用元素的ID在侦听器中执行您想要的特定功能：

<input type='text' class='keyup-hotel-input' id="hotel2name">
<input type='text' class='keyup-hotel-input' id="hotel2city">
...
<input type='text' class='keyup-hotel-input' id="hotel5name">
<input type='text' class='keyup-hotel-input' id="hotel5city">

$('.keyup-hotel-input').on('keyup',function(e) {
   if(this.id.match('city')) {
       getDestinations($(this).val());
   } else {
       getHotels($(this).val());
   }
});


...
$（'keyup hotel input'）。在（'keyup'，函数（e）上{
if（this.id.match（'city'））{
getDestinations（$（this.val（））；
}否则{
getHotels（$（this.val（））；
}
});
只需向它们添加一个类，并将元素的id传递给函数，而不是基于id编写多个事件：

<input id="hotel2city" class="hotelcity"/>

<input id="hotel2name" class="hotelname"/>

我喜欢这个解决方案，我应该早点考虑。谢谢你，亚当。
<input type='text' class='keyup-hotel-input' id="hotel2name">
<input type='text' class='keyup-hotel-input' id="hotel2city">
...
<input type='text' class='keyup-hotel-input' id="hotel5name">
<input type='text' class='keyup-hotel-input' id="hotel5city">

$('.keyup-hotel-input').on('keyup',function(e) {
   if(this.id.match('city')) {
       getDestinations($(this).val());
   } else {
       getHotels($(this).val());
   }
});

<input id="hotel2city" class="hotelcity"/>

<input id="hotel2name" class="hotelname"/>

$(".hotelcity").keyup(function(){
    getDestinations(this.id);
});

$(".hotelname").keyup(function(){
    getHotels($(this).val(),this);
});