彩虹效果无法与 A href 一起正常工作

Question

我有一个代码，我正在尝试为网站托管商编写代码，一位成员要求提供一些支持。我写了这个，它只适用于文本，但使用 href 会破坏标记。

http://jsbin.com/izebej/1/edit

代码：

  $.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function() {
      var selectMe= ["u1","u2"];
   for(var i =0;i<selectMe.length;i++){
     $('.username').find('a[href*='+selectMe[i]+']').addClass('selected');
    }
   $('.selected').text(function() {
        $(this).rainbow({
    colors: [
      '#FF0000',
      '#f26522',
      '#fff200',
      '#00a651',
      '#28abe2',
      '#2e3192',
      '#6868ff'
     ],
      animate:true,
      animateInterval:100,
      pad:false,
      pauseLength:100
       });
     });
   });

标记在 JSBIN 中——您可以清楚地看到发生了什么。我尝试了很多不同的方法。此外，如果您查看标记，我清楚地将最后一个的 href 标记为 u21，将其视为我写 u1 和 u2 的对象。将它们结合起来，看看它是否只是在寻找任何有 1 或 2 的东西。在 for 循环中，您看到我做了 a[href*='+selectMe[i]+' 我已将其更改为 a[href='selectMe[i]' 以及 a[href="'+selectMe[i]+'" 但这些都不起作用。

有什么建议吗？

Answer 1

@EasyBB 我试过了，但是没看到彩虹效果我到处都能看到...

如果您的意思是，并且 strong 不应该在 Rainbow 中看到......但只有 span 内的文本......那么它就是插件的工作方式。

如果你看到插件代码...

if (chars[x]!=' ') {
     newstr = newstr + '<span style="color: ' + options.colors[counter] + ';">' + chars[x] + '</span>';
     counter++;
} else {
    newstr = newstr + ' ';

}

他们所做的是打破元素的 HTML 内容并通过将其添加到 SPAN 中来为其应用颜色...

所以<span> TEST </span> 变成<span color="x"> < </span><span color="x"> S </span> 等等，所以它不会保留为 HTML 标记而是简单的文本...

我认为你最好的选择是找到文本的直接父元素 像

DEMO

$.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function() {
var selectMe= ["u1","u2"];
for(var i =0;i<selectMe.length;i++){
$('.username').find('a[href*="'+selectMe[i]+'"]').addClass('selected');
}
  $('.selected').find('*').andSelf().contents().filter(function(){
   return this.nodeType===3;
  }).parent().text(function() {
    $(this).rainbow({
  colors: [
  '#FF0000',
  '#f26522',
  '#fff200',
  '#00a651',
  '#28abe2',
  '#2e3192',
  '#6868ff'
  ],
animate:true,
animateInterval:100,
pad:false,
pauseLength:100
});
});
});