JQuery — переключение div в поток новостей

Пытаюсь показать/скрыть несколько div с помощью jquery после каждой новости на моей странице.

<div class="newsbox">
    <a href="#" class="item">Comments</a>
    <a href="#" class="item">Confirm</a>
</div>

Хотите, чтобы каждая из этих ссылок показывала определенный div с контентом, связанным с этой новостью. Вот div, которые по умолчанию скрыты.

<div class="itemComments">
    CONTENT
</div>
<div class="itemConfirm">
    CONTENT
</div>

Как я могу написать JavaScript с JQuery, который работает независимо от количества новостей?

Спасибо!

РЕДАКТИРОВАТЬ: Чтобы предотвратить выбор всех .itemComments на странице, возможно, я могу выбрать следующий элемент с этим именем класса, начиная с элемента с событием clickevent. Любые идеи?


javascript toggle jquery
person MikeB    schedule 03.03.2011    source источник
comment
Я не очень понимаю ваш вопрос, но что-то вроде: $('.itemComments').toggle(); и $('.itemConfirm').toggle();   -  person janosrusiczki    schedule 03.03.2011
comment
Что ж, подобный скрипт будет переключать все .itemConfirm на странице. Поиск сценария, который переключает только тот, который связан с этой конкретной новостью.   -  person MikeB    schedule 03.03.2011

Ответы (2)


arrow_upward
2
arrow_downward

Попробуй это :

$('div.newsbox a').click(function(){
   $('div.'+$(this).attr('class')+$(this).text()).show()
})

СЛЕДУЮЩИЙ :

$('div.newsbox a').click(function(){
   $('div.item'+$(this).text()).eq($(this).index()).show();
})
person Prakash    schedule 03.03.2011
comment
Спасибо, но это все еще не решает мою проблему с несколькими новостями. С помощью этого скрипта все комментарии будут отображаться для всех новостей. - person MikeB; 03.03.2011
comment
у вас есть несколько классов с тем же именем? - person Prakash; 03.03.2011
comment
В соответствии с вашей ситуацией см. мой следующий ответ. - person Prakash; 03.03.2011

arrow_upward
1
arrow_downward

Почему бы просто не использовать виджет вкладок пользовательского интерфейса jQuery? Разметка аналогична и можно накатить свою тему

Вкладки пользовательского интерфейса JQ: http://jqueryui.com/demos/tabs/

person JohnP    schedule 03.03.2011
comment
Пробовал, но не нашел рабочего решения с несколькими вкладками на одной странице и без использования ‹ul›‹li›, которые не работают с моим дизайном. Любые идеи? - person MikeB; 03.03.2011
comment
Я тоже попробовал. не будет работать из коробки. Есть ли действительно веская причина, по которой вы не хотите использовать LI вокруг ссылок? Они вообще не появляются - person JohnP; 03.03.2011