javascript - 如何为影响另一个元素的悬停元素优化 jQuery 代码

Question

我在这里找到了一些代码(不记得链接了)，但我想看看它是否可以优化。我有一张 table ，第一行会有一张图片。在第二行，有一些单元格，当您将鼠标悬停在上面时，顶部的图像会发生变化。我的 JSFiddle 现在正在使用颜色。我稍后会换入图片。

这些行现在只有 3 个单元格，但是一旦我弄明白了，它们可能会包含 12 个或 1 个单元格，所以我需要在将鼠标悬停在所有这些单元格上时显示不同的图像。

该代码有效，但我认为如果我得到多达 12 个单元格/框，它不会非常有效。如何优化此代码？

// box 1
$('#whybox1').mouseover(function(){
    $('#whybox1').css('background-color', '#F7FE2E');
    $('#animalbox').css('background-color', '#F7FE2E');
});
$('#whybox1').mouseout(function(){
    $('#whybox1').css('background-color', '#d1e6f8');
    $('#animalbox').css('background-color', '#d1e6f8');
});

顺便说一句，我已经看到像这样使用 n:child 的实现，但是在我必须支持的旧浏览器上它会被破坏。

http://jsfiddle.net/ccamacho/WfJvh/

Answer 1

也许是这样的

http://jsfiddle.net/WfJvh/5/

这只是其中一种方式。这个想法是，您向 td 添加一些属性，这些属性将包含一些信息(在本例中为颜色)并在悬停时使用该信息。

Javascript:

$(window).load(function(){
   $(document).ready(function(){
       $('table td').mouseover(function(){
           var color = $(this).attr('data-color');   
           $(this).css('background-color', color);
           $('#animalbox').css('background-color', color);
       });
       $('table td').mouseout(function(){
           $(this).css('background-color', '#d1e6f8');
           $('#animalbox').css('background-color', '#d1e6f8');
       });   
   });
});​

html:

<table>
<tr>
<td colspan="3" id="animalbox">Animal Box</td>
</tr>
<tr>
<td id="whybox1" data-color="red">1</td>
<td id="whybox2" data-color="blue">2</td>
<td id="whybox3" data-color="green">3</td>
</tr>
</table>​