hide show

@Hakob666 · Регистрация: 16.08.2018

Студворк — интернет-сервис помощи студентам

Добрый день кто то сможет сказать как сделать этот код намного меньше или как по другому можно это сделать.

HTML5
1
2
3
4
5
<meta charset="utf-8">
<div id="slider">Слайдер
<input type="button" value="Кнопка" onclick="hideshow();"/>
</div>
<div id="other" style="display:none">Другой</div>

JavaScript
1
2
3
4
5
6
<script>
function hideshow() {
  document.getElementById("slider").style.cssText="display:none";
  document.getElementById("other").style.cssText="display:block";
}
</script>

У меня будут элементов примерно 20 и кнопок тоже 20

@DrType · 09.02.2020, 14:33

Можно навесить на все слайдеры класс "slider" (аналогично для других блоков), кнопки собрать в массив buttons.

JavaScript
1
2
const sliders=Array.from(document.getElementsByClassName("slider"));
for(let button of buttons){button.addEventListener("click", ()=>{sliders[buttons.indexOf(button)].style.cssText="display:none";/*и т. д.*/})}

@Hakob666 · 09.02.2020, 14:35 **[ТС]**

Это сделает все в display:none?

@DrType · 09.02.2020, 14:38

Нет-нет, это я хотел добиться того, чтобы у каждого из 20 блоков была своя кнопка, по нажатию на которую именно этот блок принимал display:none.

@Hakob666 · 09.02.2020, 14:46 **[ТС]**

Вот смотрите при нажатии должен блок появлятся а тот который был исчезать я написал но там для всего этого понадобилось 360 строк хочу знать возможно чтобы было поменьше?

@DrType · 09.02.2020, 15:01

У Вас двадцать пар блоков. Для каждой из них должна быть своя кнопка, по клику на которую первый блок в паре исчезает, а второй появляется, а остальные пары не трогаем? Или должна быть одна кнопка, по нажатию на которую все первые блоки исчезают, и вместо каждого появляется другой (двадцать изменений сразу)?

@Hakob666 · 09.02.2020, 15:10 **[ТС]**

как я могу отправить вам видео. Так вы сразу поймете

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Hakob666 -9 / 0 / 0 Регистрация: 16.08.2018 Сообщений: 52
	09.02.2020, 14:35 [ТС]
	Это сделает все в display:none? 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	09.02.2020, 14:38
	Нет-нет, это я хотел добиться того, чтобы у каждого из 20 блоков была своя кнопка, по нажатию на которую именно этот блок принимал display:none. 0

@Hakob666 -9 / 0 / 0 Регистрация: 16.08.2018 Сообщений: 52
	09.02.2020, 14:46 [ТС]
	Вот смотрите при нажатии должен блок появлятся а тот который был исчезать я написал но там для всего этого понадобилось 360 строк хочу знать возможно чтобы было поменьше? Миниатюры 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	09.02.2020, 15:01
	У Вас двадцать пар блоков. Для каждой из них должна быть своя кнопка, по клику на которую первый блок в паре исчезает, а второй появляется, а остальные пары не трогаем? Или должна быть одна кнопка, по нажатию на которую все первые блоки исчезают, и вместо каждого появляется другой (двадцать изменений сразу)? 0

@Hakob666 -9 / 0 / 0 Регистрация: 16.08.2018 Сообщений: 52
	09.02.2020, 15:10 [ТС]
	как я могу отправить вам видео. Так вы сразу поймете 0