jQuery 最好的方法是循环函数

Question

这更多的是一个你将如何去做的问题，而不是一个具体的问题。

假设我有 5 个 div，分别为 div1、div2、div3、div4、div5。制作循环函数(例如下面的循环函数)的最快/最好的方法是什么，如果单击该函数，它将循环某个 div(不是页面上的所有 div)。

这是我能想到的最好的解释方式。

单击了 Div1。调用一个函数来检查 div1 是否被列为应该循环的 div。然后开始循环功能。单击 Div6，但未将其列为可以循环的 div，且函数未运行。

function div1loop() {
        $("#div1").fadeTo("slow", 0.5, function ()    {
            $("#div1").fadeTo("slow", 0.1, div1loop);  
        });
}

您是否可以建议将“#div1”部分作为一个变量，这样我就不必为 5 个单独的 div 编写 5 个不同的函数？

了解一些背景信息 -我最终将有 50 多个 div 来执行此操作，正如您可以想象的那样，如果我可以创建一个可以执行此操作而不是 50 个的函数，它将节省我很多时间。

谢谢!

Answer 1

你可以这样做:

function divloop(selector) {
   $(selector).fadeTo("slow", 0.5, function ()    {
       $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
   });
}

然后:

divloop("#div1");

编辑:您有 2 个选择:

1. 在数组中存储允许的选择器:

   var allowedDivs = ["#div1", "#div2", "#div3" ];
   

   并在 divloop 中:

   function divloop(selector) {
       if(!$.inArray(selector, allowedDivs ) {
           return false;
       }
       $(selector).fadeTo("slow", 0.5, function ()    {
          $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
       });
   }
   

2. 或者向您的 div 添加一个类，您可以在函数中检查该类

   <div id="div1" class="canLoop"></div>
   

   然后在你的函数中:

   function divloop(selector) {
       if(!$(selector).hasClass("canLoop")) {
           return false;
       }
       $(selector).fadeTo("slow", 0.5, function ()    {
          $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
       });
   }