使用 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++;
}

但最好将所有徽标赋予相同的类（例如“徽标”），然后您可以放弃 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 在 cmets 中指出的那样，您还可以使用 $('[id^="logo-"]') 作为给他们一个类的替代方法，并且仍然使用 no-while-loop 方法。

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

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

然后用 substring 方法代替 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 函数中保持其值。我不一定会推荐这种方法（此外，您的代码效率低下），但希望它是闭包和作用域的有趣演示。