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上的某人我添加到它虽然是myHoverColors，我想要做的是像我一样改变悬停颜色与主要背景。这是我的尝试，它破坏了整个代码

$(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

我能够将您的代码转换为纯 JavaScript，因为您似乎错误地将 JQuery 与 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);

顺便说一句，在您的“悬停尝试”中，每次悬停一个元素时，您都会遍历每个姐妹节点；这是一个很大的性能命中
工作小提琴。

于 2013-05-15T16:09:08.437 回答