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，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在评论中指出的那样，你也可以使用$('[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

虽然JLR的回答是可取的，但这里有一个很大程度上学术性的证明：关闭它：

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函数中保持它的值。我不一定会推荐这种方法（除了代码之外还有许多效率低下的问题），但希望这是关闭和范围的有趣演示。

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

2 个答案: