彩虹效果与A hrefs无法正常工作

时间:2013-05-18 18:53:35

标签: javascript jquery object for-loop href

我有一个代码,我正在为网站主机编写,一位成员要求一些支持。我写了这篇文章,它只适用于Text,但有一个hrefs它会破坏标记。

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中 - 你可以清楚地看到发生了什么。我尝试了很多不同的方法。另外,如果你看一下标记我清楚地标记了最后一个是u21的href,看作是我写的对象u1和u2。将它们组合起来,看它是否只是在寻找含有1或2的东西。在for循环中,您看到我a[href*='+selectMe[i]+'我已将其更改为a[href='selectMe[i]'以及a[href="'+selectMe[i]+'"但这些都不起作用。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

@EasyBB我试图看到它,但是看到彩虹效果没问题我到处都能看到它......

如果你的意思是强者不应该在彩虹中看到...但只有跨越的文本......那么它就是插件的工作方式。

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

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