Правильный способ общения между div в jquery?

Question

Это, наверное, простой вопрос, и я просто плотный. Я просмотрел несколько jquery книг, и ничего не выскочило на меня, я, вероятно, что-то упустил.

Я ищу «правильный», лучший способ общения между элементами div / dom на странице?

Например, у меня есть страница с 5 панелями, которые отображаются при выборе ссылки, они скрывают / показывают / запускают некоторый код, который изменяет другие части на странице. Примерно такой фрагмент:

<ul>
<li><div id="unique_name_1_anchor">Unique div 1</div></li>
<li><div id="unique_name_2_anchor">Unique div 2</div></li>
<li><div id="unique_name_3_anchor">Unique div 3</div></li>
<li><div id="unique_name_4_anchor">Unique div 4</div></li>
</ul>

... Где-то еще на странице

<div id="unique_name_1_panel">Some panel 1 stuff here</div>
<div id="unique_name_2_panel">Some panel2 stuff here<div>
<div id="unique_name_3_panel">Some panel3 here</div>
<div id="unique_name_4_panel">Some panel4 here</div>

Концепция заключается в том, что, когда пользователь щелкает элемент div unique_name_X_anchor, на соответствующей панели выполняется некоторое действие (например, показать / скрыть и т. Д.). То, что я сейчас делаю, это анализ идентификатора, т. Е. ($ (This) .replace ("_ anchor", "_ panel"), чтобы получить идентификатор div другого элемента dom. Это просто кажется неуклюжим, и должно быть лучше / больше правильный способ сделать это. Предложения?

Спасибо

Answer 1

Несколько идей:

• с помощью плагина метаданных jQuery для добавления метаданных, указывающих на соответствующий DIV. http://plugins.jquery.com/project/metadata

• Проявите творческий подход, используйте другой действительный элемент DOM или действительный атрибут (rel, href) для хранения этой информации

• Если у вас есть эти данные программно, установите $('.anchor').data('correspondingPanel') на соответствующий идентификатор (или некоторые другие полезные данные).

• Если индексы всегда будут одинаковыми, используйте метод индекса jQuery, чтобы получить индекс привязки, и покажите панель с тем же индексом. http://api.jquery.com/index/

Answer 2

Вам нужно использовать id? Подойдет ли этот подход?

HTML

<ul id="anchors">
    <li><div>Unique div 1</div></li>
    <li><div>Unique div 2</div></li>
    <li><div>Unique div 3</div></li>
    <li><div>Unique div 4</div></li>
</ul>

<div id="panels">
    <div>Some panel 1 stuff here</div>
    <div>Some panel2 stuff here<div>
    <div>Some panel3 here</div>
    <div>Some panel4 here</div>
</div>

JQuery

$('#anchors div').click(function() {
    var panel = $('#panels div').eq($(this).index());
    panel.show();
})

Answer 3

Одним из способов является творческое использование имен классов для этого.

Дано:

<div id="unique_name_1_anchor">Unique div 1</div>
<div class="unique_name_1_anchor">Div 1 panel</div>

Вы можете сделать что-то вроде:

$('#unique_name_1_anchor).click(function(){$('.'+this.id).show()})

Answer 4

что-то по линии

присвойте li div класс с именем divLinks дать панели div класс с именем pabel

$('div.divLinks').click(function(){
    $('.panel').hide();
    $('.panel').eq($(this).index()).show();
});