Как правильно сделать адаптивность в данном случае?

Question

[ahahahaha2312]

Доброго дня!
У меня есть следующая разметка (классы не писал):

<div id="main_block">
<div id="first_block" onclick="goClick('first');">Один</div>
<div id="second_block" onclick="goClick('second');">Два</div>
<div id="third_block" onclick="goClick('third');">Три</div>
</div>

<div id="main_block_mobile">
<div id="first_block" onclick="goClick('first');">Один</div>
<div id="second_block" onclick="goClick('second');">Два</div>
<div id="third_block" onclick="goClick('third');">Три</div>
</div>

Стили:

#main_block {
display: block;
}
#main_block_mobile {
display: none;
}

@media (max-width: 1000px) {
#main_block {
display: none;
}
#main_block_mobile {
display: block;
}
}

И функция:

function goClick(name) {
document.getElementById(name).style.display = "none";
}

Как правильно сделать адаптивность в данном случае?
Js будет видеть, что на странице два элемента с одним айди, можно ли как-то скрывать другой блок в зависимости от размеров дисплея? При том нужно, чтобы работало без обновления страницы (то есть адаптивность будет работать, если мы будем изменять размеры окна).

Comments

[lUser L]

почему люди так боятся использовать классы, а вместо этого используют id ?

Все из-за туторов на сайтах, ютубах всяких - насмотрелись вот и теперь мучаетесь.
Очень часто попадается id в цсс, Челики тупо делают #button1, #button2, ..., #button400288287 что у них в голове в этот момент творится решительно не ясно, может автор этого вопроса ответит ?

Атрибут onclick что бы не писать классы, зысы, делегировать и тд

[ahahahaha2312]

Эмиль 🔥, тогда как прикажите находить элемент в Js? Использование классов в данном случае не поможет

[WbICHA]

ahahahaha2312, а для чего тебе вообще 2 идентичных блока? Что мешает менять стили у одного единственного?

[Nikolay Matyushkin]

ahahahaha2312, eсли речь идёт о классах, то вам поможет document.querySelector() или document.querySelectorAll()

[ahahahaha2312]

WbICHA, я уже писал, один блок для пк, второй для мобилы (не пишите про адаптацию через CSS media, контент в этих блоках разный, поэтому это не подходит)

Answer 1

[Nikolay Matyushkin]

Если объект скрывать/показывать ничего не изменится, id будет дублирован в DOM дереве и это неправильно. Просто присвойте обоим элементам классы, которые скроют блоки и присваивайте id со стилями видимости тому элементу, которому нужно.

Как вариант, добавляете слушатель ресайза страницы

window.addEventListener('resize', function(event) {
   if (event.currentTarget.innerWidth < 768) {
      // показать один блок, присвоив ему класс для отображения
   } else {
      // показать другой блок, присвоив ему класс для отображения
   }
}, true);

Но как бы это и с помощью CSS сделать можно, воспользовавшись медиазапросом

@media(max-width: 768px) // будут применены стили если ширина экрана не больше 768px

Подробнее тут

Comments

[ahahahaha2312]

Вы не правильно поняли мой вопрос. У меня проблема с тем, что получается два идентификатора одинаковых, и функция в Js работать не будет. Так вот вопрос в том, как действовать в таком случае, можно ли как-то скрыть блок от Js вообще (чтобы он видел только один идентификатор), или есть другие способы?

[Nikolay Matyushkin]

ahahahaha2312, я бы на вашем месте сначала задумался над тем, почему у вас в DOM 2 элемента с одинаковыми id.

[ahahahaha2312]

Devilz_1, потому что для адаптивности нужно, на ПК показывается один блок, на моб. другой, и внутри этих блоков id у элементов одинаковые

[Nikolay Matyushkin]

ahahahaha2312, а почему бы не использовать классы?

Answer 2

[alaskafx]

можно ли как-то скрывать другой блок в зависимости от размеров дисплея

Да.

@media screen and (max-width: 220px){ //.. где 220 — это какая-то ширина экрана
// ...код
}

Comments

[ahahahaha2312]

Вы вопрос то прочитали? У меня же в CSS уже есть медиа

[alaskafx]

ahahahaha2312, Deviliz_1 задал правильный вопрос, в плане двух одинаковых элементов.
Попробуйте изменять сами этот элемент через media, а не создавать еще один