使用JavaScript循环ID中带有数字的元素

Question

我有兴趣骑自行车浏览我的页面上有一些div,这些div在ID中有数字.

这就是我到目前为止......

    var count = 1;

    while(count != 12) {
        $('#logo-'.concat(count).concat(' > img')).click(function() {
            if($('#info-'.concat(count)).hasClass('dropdown-active')) {
                $('#info-'.concat(count)).slideUp();
                $('#info-'.concat(count)).removeClass('dropdown-active');
            } else {
                $('#info-'.concat(count)).slideDown();
                $('#info-'.concat(count)).addClass('dropdown-active');
            }
            return false;
        });

        count++;
    }

当计数到达if语句时,计数似乎停止工作.

所以页面上的ID是logo-1,info-1,logo-2,info-2等......

Answer 1

您可以更加干净地执行此操作,如下所示:

while(count != 12) {
    $('#logo-' + count + ' > img').click(function() {
        var origin = $(this).parent(),
            targetId = '#info-' + origin[0].id.substring(5),
            target = $(targetId);
        if(target.hasClass('dropdown-active')) {
            target.slideUp();
            target.removeClass('dropdown-active');
        } else {
            target.slideDown();
            target.addClass('dropdown-active');
        }
        return false;
    });

    count++;
}

但是最好给你所有的徽标都是同一个类(比如"logo"),然后你可以放弃while循环:

$('.logo > img').click(function() {
     var origin = $(this).parent(),
         targetId = '#info-' + origin[0].id.substring(5),
         target = $(targetId);
     if(target.hasClass('dropdown-active')) {
         target.slideUp();
         target.removeClass('dropdown-active');
     } else {
         target.slideDown();
         target.addClass('dropdown-active');
     }
});

编辑:正如Karl-AndréGagnon在评论中指出的那样,你也可以使用它$('[id^="logo-"]')作为一种替代方法给它们一个类,并且仍然使用无时间循环方法.

解析ID中的数字的另一种方法是将数字存储在data-num属性中:

<div class='logo' data-num='1'>...</div>

然后var origin...用substring方法代替那些东西,你会得到:

var num = $(this).parent().data('num'),
    target = $('#info-' + num);