0 
$(function () {
    var forum = $('.main-content .statused tr'),
        i, 
    myColors = ["#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#8A4B08","#084B8A","#8A0868","#6A0888","#21610B","#8A0808","#0B4C5F","#5E610B","#210B61"],
    myHoverColors=["#FFE8E9","#FFE8E9","#FFE8E9","FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FF8000","#0080FF","#FF0080","#A901DB","#04B404","#FF0000","#01DFD7","#FFFF00","#4000FF"];
    for (i = 0; i < myColors.length; i++) {
        if (!forum[i]) return;
        forum[i].style.backgroundColor = myColors[i];
    }
});

上記のコードは動作します (今は下が見えないと思っていました) SO の誰かのおかげで完全にうまくいきました主な背景とともに。これがコード全体を台無しにした私の試みです

$(function () {
    var forum = $('.main-content .statused tr'),
        i, 
myColors = ["#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#8A4B08","#084B8A","#8A0868","#6A0888","#21610B","#8A0808","#0B4C5F","#5E610B","#210B61"],
myHoverColors=["#FFE8E9","#FFE8E9","#FFE8E9","FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FF8000","#0080FF","#FF0080","#A901DB","#04B404","#FF0000","#01DFD7","#FFFF00","#4000FF"];
    for (i = 0; i < myColors.length; i++) {
        if (!forum[i]) return;
        forum[i].style.backgroundColor = myColors[i];
    }

//my hover try
$(forum).hover(function() {
   for (i = 0; i < myHoverColors.length; i++) {
         if (!forum[i]) return;
          forum[i].style.backgroundColor = myHoverColors[i];
     }
  });
});

カーソルを合わせると、コードが完全に破壊されます。これは、上記の通常のコードで行ったように色を変更しようとしているためだと思います。色の配列で投稿したメインコードのようなホバーカラーを追加する方法について誰か提案がありますか?

機能するカラーコードでもう一度試してください

$(function() {
   var forum = $('.main-content .statused tr'),i;
   var myColors = ["#000","#F00","#FF0","#FFF","#0F0","#00F"];
   var myHoverColors = ["#FF0000","#000","#FFF","#00FF00","#0000ff"];
   var i = 0;
     for(var j=0;j<forum.length;j++) {
       forumBG= forum[j];
       if(!forumBG) return;
          forum[j].style.background =myColors[i];
        if(i == myColors.length -1){
          i= 0;
       }else{
          i++;
      }
     }

  $(forum).on('mouseenter',function() {
      for(var j=0;j<forum.length;j++) {
         forumBG= forum[j];
          if(!forumBG) return;
       forum[j].style.background =myHoverColors[i];
         if(i == myColors.length -1){
          i= 0;
      }else{
          i++;
      }
    }
 });
    $(forum).on('mouseleave',function() {
      for(var j=0;j<forum.length;j++) {
      forumBG= forum[j];
       if(!forumBG) return;
      forum[j].style.background =myColors[i];
    if(i == myColors.length -1){
        i= 0;
     }else{
         i++;
     }
   }
 });
});
4

1 に答える 1

1

JQuery と JavaScript が誤って混在しているように見えるため、コードを純粋な JavaScript に変換することができました。

var i, x, forum = document.getElementsByClassName('main-content')[0].getElementsByClassName('statused')[0].getElementsByTagName('tr'),
    myColors = ["#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#8A4B08", "#084B8A", "#8A0868", "#6A0888", "#21610B", "#8A0808", "#0B4C5F", "#5E610B", "#210B61"],
    myHoverColors = ["#FFE8E9", "#FFE8E9", "#FFE8E9", "FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FF8000", "#0080FF", "#FF0080", "#A901DB", "#04B404", "#FF0000", "#01DFD7", "#FFFF00", "#4000FF"];
i = myColors.length--;
while (i--) { // backwards loop
 if (typeof forum[i] !== "undefined") forum[i].style.backgroundColor = myColors[i];
 // an undefined index will break the script
}

function handle(x) {
  forum[x].onmouseover = function () {
    forum[x].style.backgroundColor = myHoverColors[x];
  };
  forum[x].onmouseout = function () {
    forum[x].style.backgroundColor = myColors[x];
  };
}

x = forum.length--;
while (x--) handle(x);

そして、「ホバートライ」では、要素がホバーされるたびに、すべての姉妹ノードをループします。それは大きなパフォーマンスヒットです
Working fiddle .

于 2013-05-15T16:09:08.437 に答える