2

我在这里拿起了一些代码（不记得链接），但我想看看它是否可以优化。我有一张桌子，第一行会有一张图片。在第二行中，当您将鼠标悬停在某些单元格上时，顶部的图像会发生变化。我的 JSFiddle 现在正在使用颜色。稍后我将交换图像。

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

该代码有效，但我认为如果我得到多达 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/ccamcho/WfJvh/

4

3 回答 3

2

也许是这样的

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>​
于 2012-12-10T19:37:08.463 回答
1 
<table>
<tr>
<td colspan="3" id="animalbox">Animal Box</td>
</tr>
<tr id="boxes">
<td class="box" data-hoverColor="#F7FE2E" id="whybox1">1</td>
<td class="box" data-hoverColor="#F6CEE3" id="whybox2">2</td>
<td class="box" data-hoverColor="#81F7BE" id="whybox3">3</td>
</tr>
</table>​


$('#boxes').on('mouseenter mouseleave', '.box', function(e) {
if (e.type === 'mouseenter') {
    console.log()
    $(this).css('background-color', $(this).data('hoverColor'));
    $('#animalbox').css('background-color', $(this).data('hoverColor'));
}
else {
    $(this).css('background-color', '#d1e6f8');
    $('#animalbox').css('background-color', '#d1e6f8');
}
});

JSfiddle：http: //jsfiddle.net/WfJvh/4/

于 2012-12-10T19:30:50.707 回答
1

您是否有理由需要使用mouseoverandmouseout而不是 just hover？如果您不必担心 IE6，那么您可以:hover在 CSS 中使用来交换样式。

#whybox1:hover {
    background-color: #d1e6f8;
}
#whybox1:hover {
    background-color: #F7FE2E;
}

如果您需要动态向表格添加图像并且它不能是背景图像，那么您需要使用 JS。我会建议这样的事情：

$('#whybox1').hover(function() {
    // this happens when you hover over the element
    $(this).addClass('hover');
},
function() {
    // this happens when you're no longer hovering over the element
    $(this).removeClass('hover');
});

只需添加一个类并在应用该类时修改元素样式，然后在悬停结束时删除该类。

即使您决定使用鼠标悬停/移出，它也不是低效的 - 是什么让您这么认为？除非您将这些事件附加到数百个（可能是数千个）元素，否则您不会看到性能问题。不管你怎么做，12 个表格单元格就可以了。如果有可能，我建议使用 CSS。

于 2012-12-10T19:33:10.103 回答