Javascript 将彩虹文本应用于类中的所有文本

我发现了一个非常好的彩虹文字动画，我很喜欢：

我试图将其效果应用于类中的所有文本。

这里有一些文本…

问题是，如果一页上有两段不同的文本：

<span class="rainbow">Text #1</span>
<span class="rainbow">Text #2</span>

Text#1
正文#2

彩虹效果适用于两段文本，但每个跨度的文本内容更改为

text#2

文本在页面上不是静态的，因此我不能使用

id

---

是否有一种方法可以将每个彩虹文本跨度的类（或id）更改为

rainbow-1

，

rainbow-2

等，并在每个跨度上独立执行javascript代码？可能是一个循环，它以彩虹-开始在id上迭代，并将效果独立应用于它？

您猜对了。通过在

.rainbow

元素上使用jQuery的

.each

，可以正确显示文本

这是工作代码

$('.rainbow').each(function() {
  $(this).rainbow({
    colors: [
      '#FF0000',
      '#f26522',
      '#fff200',
      '#00a651',
      '#28abe2',
      '#2e3192',
      '#6868ff'
    ],
    animate: true,
    animateInterval: 100,
    pad: false,
    pauseLength: 100
  });
});

这是一张正在运行的GIF

---

当然，看起来插件希望您一次只声明一个元素

您可以将其放入each循环中，让回调使用

i

变量来表示当前索引，并使用

$（this）

为类中的每个项实例化它

最终结果将包括您的

.rainbow-1

，

.rainbow-2

等类

$('.rainbow').each(function(i) {
  $(this).addClass('rainbow-' + i).rainbow({
    colors: [
      '#FF0000',
      '#f26522',
      '#fff200',
      '#00a651',
      '#28abe2',
      '#2e3192',
      '#6868ff'
    ],
    animate: true,
    animateInterval: 100,
    pad: false,
    pauseLength: 100
  });
});

---

您可以这样解决这个问题：

$('.rainbow').each(function() {
$(this).rainbow({
    colors: [
        '#FF0000',
        '#f26522',
        '#fff200',
        '#00a651',
        '#28abe2',
        '#2e3192',
        '#6868ff'
    ],
    animate: true,
    animateInterval: 100,
    pad: false,
    pauseLength: 100
});
});

您可以使用jQuery“each”来解决您的问题，如下面的

<div class="foo">123456789</div>
<div class="foo">123456789</div>
<div class="foo">123456789</div>
<div class="foo">123456789</div>


    $(".foo").each(function(){
        $(this).rainbow({animate:true,animateInterval:10,colors:['#FF0000','#f26522','#fff200','#00a651','#28abe2','#2e3192','#6868ff']});
    });

123456789
123456789
123456789
123456789
$（“.foo”）.each（函数（）{
彩虹（{animate:true，animateInterval:10，颜色：['FF0000'，'f26522'，'fff200'，'00a651'，'28abe2'，'2e3192'，'6868ff']）；
});

你能创建一个JSFIDLE让我们看到代码运行吗？哦，你的有一个GIF，你赢了！这是正确的答案，但是这个插件让你这么做似乎很粗略。jQuery的一大优点是使用一个类选择器，并对该选择器返回的每个对象进行隐含迭代。我同意，如果我不得不猜测的话，库的开发人员可能忽略了这个问题。顺便说一句，我不得不再仔细研究一下，这是一个具有阶段性/瀑布效应的版本：在摆弄它并使其工作后，我去发出一个拉请求，发现其他人已经做了同样的事情。英雄联盟