JQuery for slidedown() 中的 css 类名循环

Question

是否可以创建一个 for 循环，它将遍历循环并将特定代码分配给不同的 css 类？

我的 css 类是在 template.css 文件中定义的(有 100 个具有相似名称的类)，所以很明显它应该看起来像下面的代码，顺便说一下，哪个没有什么？

for(i=1;i<101;i++) {
    $(document).ready(function () {  
        $('.inner' + i).hide(); 
        $('.outside' + i).hover(
            function () {
                $('.inner' + i, this).stop(true, true).slideDown(200);
            },
            function () {
                $('.inner' + i, this).stop(true, true).slideUp(200);            
            });
    });
}

顺便说一句，我的类(class)是: 外面 1，外面 2，外面 3 ... 内层 1、内层 2、内层 3...

Answer 1

是的，这是可能的，但是由于 JavaScript 中一个非常常见的陷阱，您的代码将失败:循环的每次迭代都会创建一系列函数，并且这些函数中的每一个都关闭相同变量我。稍后，当函数执行时，它们的单个共享实例 i 都将具有相同的值，即 100。

您需要将i 的唯一实例传递给您的每个内部函数，使用immediately-invoked function expression, or IIFE 可以最轻松地做到这一点。 .

$(function () { // this is the same as $(document).ready

  for (var i = 0; i < 100; ++i) {
    (function (i) {
        $('.inner' + i).hide(); 
        $('.outside' + i).hover(
            function () {
                $('.inner' + i, this).stop(true, true).slideDown(200);
            },
            function () {
                $('.inner' + i, this).stop(true, true).slideUp(200);            
            });
     }(i));
  }

});

请注意，我已将 $(document).ready 移到您的 for 循环之外；这是一个附带的优化，与解决方案没有直接关系，但绝对值得。将 100 个回调绑定(bind)到 $(document).ready 是没有意义的，您的代码就是这样做的，因为您可以简单地将整个循环移动到一个回调中。