여러 요소를 "링크"할 수있는 방법이 있습니까?

Question

한다고 가정 I이 4 명 볼 div의 :
  - 컨테이너
1 숨겨진 DIV에 싸여, 하단 2 - 2
  최고.

마우스가 하단 div 위로 마우스를 가져 가면 색상이 변경되고 상단 div 중 하나의 색상이 변경됩니다.

사용자가 하단 div를 클릭하면 숨겨진 div가 나타나고 마우스가 컨테이너를 떠날 때까지 화면에 그대로 남아 있습니다.

if 문을 사용하여 div의 색상을 변경하지만이 작업을 올바르게 수행하고 있는지 여부는 확실하지 않습니다. 어쩌면이 일을하는 더 간단하고 우아한 방법이있을 것입니다.

따라서 질문이 있습니다.
  - if 문을 사용해야합니까? 어쩌면 코드의 양을 줄이기 위해 어떻게 든 요소 쌍을 "링크"하는 방법이 있을까요?
  - 숨겨진 div가 보이는 동안 최상위 div를 활성 상태로 유지하려면 어떻게해야합니까? if 문을 사용하여 추가 함수를 작성해야합니까? 규칙 위반을 반복하지 않겠습니까? 여기

코드 예제 : http://jsfiddle.net/Xq9kr

Answer 1

당신은 구조을 통해 암시 적 링크를 만들 수 있습니다.

$('div.bottom > div').hover(function() { 
    var index = $(this).toggleClass('highlight').index(); 
    $('div.top > div').eq(index).toggleClass('highlight'); 
}); 

아니면 데이터 속성 및 ID를을 통해 명시 적으로 링크를 만들 수 있습니다

<div class="top"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
</div> 
<div class="bottom"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
</div> 

당신은 다음 인덱스를 통해 상단의 각 사업부를 선택할 수 있습니다 :이 HTML로 예를 들어

.

<div class="top"> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
</div> 
<div class="bottom"> 
    <div data-for="div2">Div 2</div> 
    <div data-for="div1">Div 1</div> 
</div> 

다음과 같이 선택

$('#' + $(this).attr('data-for')).toggleClass('highlight'); 
// Or, even better if you're using jquery-1.4.3+ 
$('#' + $(this).data('for')).toggleClass('highlight');