0

ウェブサイトのホスト用に書き込もうとしているコードがあり、メンバーがサポートを求めました。これは私が書いたもので、テキストに対してのみ機能しますが、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 にあります。何が起こっているかを明確に確認できます。私は多くの異なる方法を試しました。また、マークアップを見ると、最後のものに対する href が u21 であることを明確にマークしており、u1 と u2 を記述したオブジェクトと見なされます。それらを組み合わせて、1つまたは2つだけを探しているかどうかを確認します。あなたが見る for ループでは、私はa[href*='+selectMe[i]+'それをに変更しましたがa[href='selectMe[i]'、a[href="'+selectMe[i]+'"それらは機能しません。

助言がありますか？

4

1 に答える 1

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マークアップとしてではなく、単純なテキストとして残ります...

あなたの最善の策は、次のようなテキストの直接の親である要素を見つけることだと思います

デモ

$.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
});
});
});
于 2013-05-19T16:00:36.947 に答える