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

set events to DOM objects using loop

本文关键字：DOM 对象 设置 事件 循环      更新时间：2023-09-26

我有一些DOM输入，我向它们添加了一些事件，输入如下:

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

的工作，我想做的是不重复上面的代码，但有一个for循环附加的事件。所以我写了一个life:

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

但这不起作用，知道我做错了什么吗?

使用一个类将事件一次性添加到所有元素中，然后使用元素的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());
   }
});

最好给它一个class，然后给它一个data-id之类的，这样它就可以伸缩了:

HTML: 

<div class="hotelCity" data-id="10"></div>

JS: 

$(".hotelCity").on("keyup", function(){
    getDestinations($(this).data("id"));
});

等等

您的问题是范围，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;
    }
}();

只需为它们添加一个类，并将元素的id传递给函数，而不是基于id编写多个事件:

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

并在类选择器上写事件:

$(".hotelcity").keyup(function(){
    getDestinations(this.id);
});
$(".hotelname").keyup(function(){
    getHotels($(this).val(),this);
});
相关文章：