Question

$(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];
    }
});

上面的代码可以工作（以为它现在没有看到底部）完全没问题，这要归功于S.O. 我添加到它的是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++;
     }
   }
 });
});

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

在你的'悬停试试'中，每当一个元素悬停时，你就会遍历每个姐妹节点;这是一个性能大打击
Working fiddle

改变循环中元素的背景，然后改变悬停颜色

1 个答案: