Как сделать связку элементов при помощи jquery?

Question

[fantazerno]

есть группа div

[ div ] [ div ] [ div ] [ div ]
|
[ div инф 1 ]

[ div ] [ div ] [ div ] [ div ]
|
[ div инф 2 ]
как сделать при помощи jquery , чтобы при щелчке на один из див , выводилась соответствующая информация

Answer 1

[Makaveli]

Вот такой, например, простой вариант:

[ div ] [ div ] [ div ] [ div ]

<!-- дивы, по которым надо кликнуть -->
<div data-id="div1" class="selector"></div>
<div data-id="div2" class="selector"></div>
...
<!-- див, в котором будет текст выводиться -->
<div id="content"></div>

<!-- скрытые дивы, в которых тексты, которые будут выводиться по клику -->
<div style="display:none;" data-id="div1" class="infoText">Text 1</div>
<div style="display:none;" data-id="div2" class="infoText">Text 2</div>

и на jQuery

$('.selector').click(function() {
  var id = $(this).data('id'); // получаем значение из атрибута data-id дива, на который кликнули
  var htmlToShow = $('div.infoText[data-id="' + id + '"]').html(); // получаем текст из скрытого дива с таким же data-id
  $('#content').html(htmlToShow); // профит
});

Вроде того

Answer 2

[andreyqin]

Как соседей или с помощью data-атрибутов. Например у кликнутого data-id="4", у блока с информацией data-for-id="4". При клике получаете id:

var id = $(this).data('id');
и ищите элемент с data-for-id = id:
$('[data-for-id="' + id + '"]')