2

ここでいくつかのコードを取得しましたが（リンクを思い出せません）、最適化できるかどうかを確認したいと思います。私はテーブルを持っていて、最初の行に画像があります。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/

4

3 に答える 3

2

たぶん、このようなもの

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

これは、これを行う 1 つの方法にすぎません。アイデアは、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

just の代わりにmouseoverandを使用する必要がある理由はありますか? IE6 について心配する必要がない場合は、CSS を使用してスタイルを交換できます。mouseouthover: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 を使用することをお勧めします。

于 2012-12-10T19:33:10.103 に答える