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

Question

我有兴趣循环浏览一些 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++;
}

但最好为所有徽标提供相同的 class（例如，"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-"]') 作为给他们 class 的替代方法，并且仍然使用无 while 循环方法。

从 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 将在点击函数中保持它的值。我不一定会推荐这种方法（此外，您的代码中还有许多低效之处），但希望它是闭包和作用域的有趣演示。

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

Using JavaScript to cycle through elements with numbers in the ID

html

javascript

jquery

loops

while-loop