Как скрыть все div с одним классом?

Question

[Евгений Иванов]

На странице есть ссылка и несколько дивов.
Как скрыть все div с одним классом (day_2017-06-08) ?
Мой js код не корректно работает - не скрывает эти дивы. Хотя и id ссылки и объекты передаются/находятся...

<a href="#" id="2017-06-08" class="hide_day_window">Скрыть</a>
<div class="page_table day_2017-06-08">Текст</div>
<div class="page_table day_2017-06-08">Текст</div>
<div class="page_table day_2017-06-09">Другой день - не скрываем это</div>

$(function(){
$('.hide_day_window').on('click', function(){
var id=$(this).attr('id');  /* day_2017-06-08*/
var div_window=$('.day_'+id);  /* Object  */
var show_hide_link=document.getElementById(id);  /* Object  */
if(div_window.style.display=="none")
{
show_hide_link.innerHTML="Скрыть";
div_window.style.display="block";
}
else{
show_hide_link.innerHTML="Показать";
div_window.style.display="none";
}
return false;
});
})

Comments

[crazyhat]

Извини за комментарий не по теме, но почему ты внутри JQuery используешь нативный js?

Answer 1

[Negwereth]

Точка не может быть частью имени класса

Comments

[Евгений Иванов]

Исправил.
Рабочий код написал в коментарии ниже (div_window.hide() - работает).
осталось только написать условие скрытия - если блок виден=скрыть иначе показать.

Рабочий код. нужно как то добавить условие скрытия и показа блока.

<!-- Функция скрытия окна дня -->
$(function(){
$('.hide_day_window').on('click', function(){
var id=$(this).attr('id'); /* id ссылки */
var div_window=$('.day_'+id);  /* все дивы с классом  day_2017-06-08 */
/* 
тут нужен код типа if(div_window.style.display=="none")
но это не работает
*/
div_window.hide();  /* Скрываем. Работает. */
}

Answer 2

[Дилик Пулатов]

div_window.show()
div_window.hide()
попробуйте

Comments

[Евгений Иванов]

Исправил точки в имени класса на тире. (как просили выше)
Вот рабочий код, но он делает не совсем то, что мне надо - а именно только скрывает.
А у меня задача - скрыть-показать.

<!-- Функция скрытия окна дня -->
$(function(){
$('.hide_day_window').on('click', function(){
var id=$(this).attr('id'); /* id ссылки */
var div_window=$('.day_'+id);  /* все дивы с классом  day_2017-06-08 */
/* 
тут нужен код типа if(div_window.style.display=="none")
но это не работает
*/
div_window.hide();  /* Скрываем. Работает. */


}

[Yevgeniy Kisselyov]

Увас же jquery
Делайте:
div_window.toggle();

[Дилик Пулатов]

logpol32: показать - div_window.show()
добавляют стиль
<div style="display:block">Ntrcn</div>

if(div_window.style.display=="none")
{
show_hide_link.innerHTML="Скрыть";
div_window.show()
}
else{
show_hide_link.innerHTML="Показать";
div_window.hide()
}

[Евгений Иванов]

Yevgeniy Kisselyov: Дилик Пулатов:
Спасибо. Финальный рабочий код получился такой

<!-- Функция скрытия окна дня -->
$(function(){
$('.hide_day_window').on('click', function(){
var id=$(this).attr('id'); //id ссылки
var show_hide_link=document.getElementById(id); //Ссылка
var div_window=$('.day_'+id); 
div_window.toggle();
if ($(div_window).is(':visible')=="false") {show_hide_link.innerHTML="Скрыть";} else {show_hide_link.innerHTML="Показать";}
return false;
});
})