@sunnyrio

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

CSS:
.exp_block-2-- {
	display: none;
}
.exp_block-2--active {
	display: flex;
	flex-direction: column;
}

HTML. Список элементов на которые происходят нажатие
<div class="exp_block-2_btns">
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img1" user-data="1"></div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img2" user-data="2"></div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img3" user-data="3"></div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img4" user-data="4"></div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img5" user-data="5"></div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img6" user-data="6"</div>
	<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img7" user-data="7"></div>
</div>


HTML. Список контейнеров которые нужно отображать:
<div class="exp_block-2-- exp_block-2--active" user-data="1">
		<div class="exp_block-2_capt">
			Hadoop и MapReduce
		</div>
		<div class="exp_block-2_desc">
			Инструмент и фреймворк для вычисления распределённых задач с использованием 				большого количества компьютеров («ноды») в кластере.
		</div>
	</div>
	<div class="exp_block-2--" user-data="2">
		<div class="exp_block-2_capt">
			NoSQL, MongoDB
		</div>
		<div class="exp_block-2_desc">
			Нереляционные базы данных для работы с Big Data на примере MongoDB.
		</div>
	</div>
	<div class="exp_block-2--" user-data="3">
		<div class="exp_block-2_capt">
			Apache Spark
		</div>
		<div class="exp_block-2_desc">
			Фреймворк с открытым исходным кодом для реализации распределённой обработки неструктурированных и слабоструктурированных данных.
		</div>
	</div>
	<div class="exp_block-2--" user-data="4">
		<div class="exp_block-2_capt">
			Google Colab
		</div>
		<div class="exp_block-2_desc">
			Сервис, который позволяет запускать библиотеки Python «в облаке».
		</div>
	</div>
	<div class="exp_block-2--" user-data="5">
		<div class="exp_block-2_capt">
			PySpark
		</div>
		<div class="exp_block-2_desc">
			Пакет распределённого управления данными и машинным обучением в Apache Spark.
		</div>
	</div>
	<div class="exp_block-2--" user-data="6">
		<div class="exp_block-2_capt">
			Pandas
		</div>
		<div class="exp_block-2_desc">
			Продвинутая и быстроразвивающаяся библиотека для обработки и анализа данных в Python.
		</div>
	</div>
	<div class="exp_block-2--" user-data="7">
		<div class="exp_block-2_capt">
			Excel
		</div>
		<div class="exp_block-2_desc">
			Программа для работы с электронными таблицами.
		</div>
	</div>


Вот код jquery на обработку но он не работает, что не так?:
$('.exp_block-2_btns_imgs').onClick((this) => {
	   let n = $(this).attr('user-data');
	   $('.exp_block-2--').hide();
	   $('.exp_block-2--[user-data="'+ n +'"]').show();
	});
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
Eridani
@Eridani
Мимо проходил
$('.exp_block-2_btns_imgs').click(function() {...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@BATPYIIIKOB
PHP, JS
1. Нормально назовите классы, а не вырвиглаз ".exp_block-2--" например: ".exp_block-2" (Код читать тяжело)
2. Для идентификации элемента используйте data- атрибуты, не "user-data="6" , а "data-user="6"". И вот этот весь пипец $('.exp_block-2--[user-data="'+ n +'"]').show(); будет не нужен, сможете делать поиск по data- атрибутам if ($(this).data('user') == n)... и т.д.. Это лишь пример, надо не через this а через нужный родительский элемент...
3. Для показа элемента, просто удалите .removeClass() класс ".exp_block-2--". Для скрытия - добавьте .addClass(). Т.к. у вас в нём изначально прописано " display: none;"
4. Да и перепишите реакцию на событие как показано выше
Ответ написан
Ваш ответ на вопрос

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

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