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

Question

我有兴趣骑自行车通过我的页面上有号码在ID中的一些div。

这就是我目前所拥有的..。

    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，INF-1，logo-2，INF-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++;
}

但是最好给您所有的徽标相同的类(例如，“徽标”)，然后您可以放弃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éGagnon在评论中指出的那样，您也可以使用$('[id^="logo-"]')作为给他们提供类的替代方法，并且仍然使用不同时循环的方法。

解析in中的数字的一个替代方法是将数字存储在data-num属性中：

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

然后，用子字符串方法代替var origin...内容，您将拥有：

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

Answer 2

虽然JLRishe的回答更可取，但这里主要是用闭包来实现这一点的学术演示：

var count = 1;

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

    count++;
}

通过调用一个函数并将该值作为参数传递，您将创建一个新的作用域，因此id将在click函数中维护它的值。我不一定推荐这种方法(除此之外，您的代码中还有许多效率低下的地方)，但希望这是闭包和范围的有趣演示。