Jquery 如何在一个函数中为多个数组定义不同的选项？

这是我的第一个问题，我希望我没有错过任何相关的话题，但是我还没有找到答案。我一直在摆弄一个（可能很简单）jquery任务，我被卡住了。嗯，我当然是jquery的新手，所以请友善一点：-）

我想做一个简单的闪现单词混浊的事情，不同的单词组（列表项）随着个别延迟淡入淡出。我用一个简单的函数实现了这一点，我为三组中的每一组调用了三次。我想知道是否有一种方法可以组合这三个函数，但仍然为每个单词数组定义一个单独的延迟

这是我的小提琴：

也许没有办法把所有的东西都放在一个函数中，使用长版本完全可以吗？我不知道。对我来说，这似乎完全没有效率

为了快速查看，这里是我的一个功能：

var wordIndex = -1;

(function () {

    var words1 = $(".cloud1");
    function showNextWord() {

        ++wordIndex;
        words1.eq(wordIndex % words1.length)
            .fadeIn(500)
            .delay(1000)
            .fadeOut(1000, showNextWord);
    }

    showNextWord();

})();

这是我名单的一部分

<ul>
<li class="cloud1">smoke</li>
<li class="cloud1">denim</li>
<li class="cloud1">eyebrow</li>

<li class="cloud2">angle</li>
<li class="cloud2">staple</li>
<li class="cloud2">basket</li>
...

烟雾
牛仔布
眉毛
角度
订书钉
篮
...

谢谢大家

这样试试：

var flash = function (jq, fadein, wait, fadeout) {

    var quotes = $(jq);
    var quoteIndex = -1;

    function showNextQuote() {

        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(fadein)
            .delay(wait)
            .fadeOut(fadeout, showNextQuote);
    }

    showNextQuote();

};

flash(".cloud1", 500, 700, 500);
flash(".cloud2", 500, 800, 500);
flash(".cloud3", 500, 900, 500);

---

如果不让代码变得更复杂，你就不能真正做你想做的事情。但是你可以尝试的是有一个共同的功能来完成这项工作

function beginCloud($obj, delay) {

    var wordIndex = -1;
    var showNextWord = function() {

        ++wordIndex;
        $obj.eq(wordIndex % $obj.length)
            .fadeIn(500)
            .delay(delay)
            .fadeOut(1000, showNextWord);
    }

    showNextWord();

}

beginCloud( $('.cloud1', 1000) );
beginCloud( $('.cloud2', 2000) );
beginCloud( $('.cloud3', 3000) );

---

我制作了一个稍微复杂一点的版本，它允许您只向文档中添加新元素，而无需更新JavaScript

代码如下：

var wordIndexes = {};

$(function() {
    num_groups = 0;
    $('ul.cloud').each(function() {
        var group = $(this).data('group');
        wordIndexes[group] = -1;
        num_groups = (group > num_groups) ? group : num_groups;
    });

    for (n=1; n <= num_groups; ++n) {
        (function(i) {
          var words = $('ul.cloud[data-group="' + i + '"] li');

          function showNextWord() {
            ++wordIndexes[i];
            words.eq(wordIndexes[i] % words.length)
                .fadeIn(500)
                .delay(i * 1000)
                .fadeOut(1000, showNextWord);
          }
          showNextWord();
        })(n);
    }
});

HTML应该是这样的：

<ul class="cloud" data-group="1">
  <li>smoke</li>
  <li>denim</li>
  ...
</ul>

<ul class="cloud" data-group="2">
...

冒烟
牛仔布
...


...

---

您可以选择为延迟或任何其他您认为合适的配置参数添加一个数据字段。

您希望每个元素都有随机延迟，还是每个列表都有一个常量？一些常量延迟完全可以。我很感兴趣的是，如何添加随机延迟（“Math.random（）”），但我不需要它来构建我的云。我更新了我的小提琴，顺便说一句，谢谢，这很快。这个版本确实会对每个组进行闪烁：但我仍然需要定义不同的延迟，这样它们就不会同时闪烁，而是不规则地一个接一个地闪烁。就像我的第一把小提琴。谢谢你，诺洛！就这样。现在我知道它是怎么工作的了。酷。太快了：-））哦，谢谢你。这真的有点复杂，我需要一些时间来理解它是如何工作的：-）根据数据组，每个组的延迟将是1000的倍数（1*1000，2*1000，3*1000），对吗？是的。否则，如果您想获得更多自由，您可以为它们设置

data-

属性。或者甚至使用随机延迟…似乎有一个小问题-有时，并非总是，同一个单词在切换到下一个列表项之前会闪烁两三次。你能再看一下吗？谢谢。是的，我看到了，但是你的例子也出现了。代码更新了。您必须为每个组使用单独的计数器，否则不同的延迟会把整个事情搞砸。

<ul class="cloud" data-group="1">
  <li>smoke</li>
  <li>denim</li>
  ...
</ul>

<ul class="cloud" data-group="2">
...