将彩虹文本应用于课堂中的所有文本

Question

我发现了一个非常好的彩虹文字动画我喜欢：
https://github.com/xoxco/Rainbow-Text

我正在尝试将此效果应用于课程中的所有文本 <span class="rainbow">some text here...</span>

问题在于，如果我在页面上有两个不同的文本：

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

彩虹效果适用于两段文字，但每个范围的文字内容更改为Text #2。

页面上的文字不是静态的，因此我无法使用id。

有没有办法可以将每个彩虹文本范围的类（或id）更改为rainbow-1，rainbow-2等，并且可以在每个范围内独立执行javascript代码？也许是一个循环，它以id rainbow-开头迭代id并将效果独立地应用于它？

Answer 1

你怀疑是对的。通过在.each元素上使用jQuery的.rainbow，文本可以正常显示。

这是工作代码

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

这是行动中的GIF！

Answer 2

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

你可以将它放在每个循环中，让你的回调使用Circle::Circle() : radius(0), center(0,0) { } 变量来表示当前索引，并使用i为每个项目实例化它。

最终结果还包括您的$(this)，.rainbow-1等课程。

.rainbow-2

http://jsfiddle.net/ajVzR/683/

Answer 3

你可以使用jQuery＆＃34;每个＆＃34;解决你的问题，如吼叫

<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']});
    });

Answer 4

你可以像这样解决这个问题：

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

demo