temp-market
@temp-market
Фронтэнд разработчик

Как правильно обратиться к одинаковым элементам через JavaScript?

На сайте есть несколько вот таких дивов
<div class="work">
      <a class="open">Открыть</a>
      <div class="work-description">Тут описание</div>
</div>
<div class="work">
      <a class="open">Открыть</a>
      <div class="work-description">Тут описание</div>
</div> ...........

Хочу сделать так чтоб изначально все дивы work-description были скрыты.
Мой гениальный код:
$('.work-description').hide(); - 1 проблема - скрывает только первый на сайте
$('a.open').click(function(){
       $('.work-description').slideToggle('normal');
});

Хочу сделать чтоб при клике на open открывался только тот который находиться в диве #work вместе с open.
Я знаю мне тут нужен this но как ни стараюсь не получается
  • Вопрос задан
  • 4071 просмотр
Решения вопроса 2
iusfof
@iusfof
Front-end developer

$('.work-description').hide();
- 1 проблема - скрывает только первый на сайте

странно, я потестил - у меня скрываются все элементы с одинаковым классом
___________________________________________________________________________________

для
<div class="example">
  <div class="button"></div>
  <div class="some_block"></div>
</div>
<div class="example">
  <div class="button"></div>
  <div class="some_block"></div>
</div>


next
.next()
1:
$('.button').click(function(){
  $(this).next().slideToggle('normal');
});


или более универсально
.parents() + .children()
2:
$('.button').click(function(){
  $(this).parents('.example').children('.some_block').slideToggle('normal');
})


или выбор сестринского элемента
.siblings()
3:
$('.button').click(function(){
  $(this).siblings('.some_block').slideToggle('normal');
});
Ответ написан
ProgramCodePav
@ProgramCodePav
Front-end developer. Love open source
я не такой уж и профи, но есть идея:

var count = $('.work-description').length; //количество элементов с этим классом
for (var i = 0; i <= count; count++) {
    $('.work-description')[i].hide(); 
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
RadiationX
@RadiationX
Front-End разработчик
ID на странице может быть только один
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы