다른 요소에 영향을주는 요소를 가리 키기 위해 jQuery 코드를 최적화하는 방법

Question

여기에서 일부 코드를 가져 왔지만 (링크를 회수 할 수는 없지만) 최적화 할 수 있는지 알고 싶습니다. 나는 테이블을 가지고 있으며, 첫 번째 줄에는 이미지가있을 것입니다. 두 번째 행에는 마우스를 가져 가면 상단의 이미지가 변경되는 셀이 있습니다. 내 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을 사용하여 이와 같은 구현을 보았다.

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

Answer 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/

Answer 2

당신이 mouseover를 사용해야하고 대신 hover의 mouseout 이유가 있나요? 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를 사용하도록 제안 할 것이다.

Answer 3

어쩌면이 일의 한 방법이

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

같은. 아이디어는 사용자가 td에 몇 가지 정보 (이 경우 색상)를 포함하고 해당 정보를 호버링하는 동안 사용하는 일부 속성을 추가하는 것입니다.

자바 스크립트 :

$(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>​