Есть ли способ «связать» несколько элементов?

Question

Предположим, у меня есть 4 видимых дивы:
  - 2 на верхней
  - 2 на дне, завернутые в контейнере
и 1 скрытый Див.

Когда мышь наводится над нижним div, она меняет цвет и меняет цвет одного из верхних div.

Когда пользователь нажимает на нижний div, скрытый div появляется и остается на экране, пока мышь не покинет контейнер.

Я использую инструкции if для изменения цвета divs, но я не уверен, что я делаю это правильно. Возможно, есть более простой и элегантный способ сделать это.

Так что есть вопросы:
  - Должен ли я использовать здесь заявление? Может быть, есть способ как-то «связать» пары элементов, чтобы уменьшить количество кода?
  - Что делать, если я хочу, чтобы верхний div оставался активным, в то время как скрытый div виден? Нужно ли писать дополнительную функцию с операторами if? Разве это не должно быть «не повторяй себя» с нарушением правила?

Пример кода здесь: http://jsfiddle.net/Xq9kr

Answer 1

Вы можете создать неявные связи через структуру.

Например, с этой HTML:

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

Вы можете выбрать соответствующий DIV в верхней с помощью индексов:

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

Или вы можете создать явные ссылки через атрибуты данных и идентификаторы ,

<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');