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

时间:2012-12-10 19:09:08

标签: javascript jquery css

我在这里选了一些代码(无法回想起链接),但我想知道它是否可以优化。我有一张桌子,在第一排会有一张图片。在第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/ccamacho/WfJvh/

3 个答案:

答案 0 :(得分: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>​

答案 1 :(得分: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/

答案 2 :(得分:1)

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

#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。