Как передать значение data в dom элементы?

Question

Максим Варава @Dillett

Начинающий web разработчик

JavaScript

Как передать значение data в dom элементы?

Прошу помощи в написании небольшого скрипта.
Смысл такой что есть 2 ссылки, служащие переключателями:

<div class="switch-address">
    <a data-key="1" class="adress-link-contacts adress-link-active" href="#">Адрес-1</a>
    <a data-key="2" class="adress-link-contacts " href="#">Адрес-2</a>
</div>

И контент, который они переключают:

<div id="address-1" class="adress-block">Адрес 1-го блока</div>
    <div id="address-2" class="adress-block">Адрес 2-го блока</div>
    
    <div id="contact-img-1" class="ct-block-right">Картинка 1-го блока</div>
    <div id="contact-img-2" class="ct-block-right">Картинка 2-го блока</div>

    <div id="contact-block-1" class="adress-block-contact">Контент 1-го блока</div>
     <div id="contact-block-2" class="adress-block-contact">Контент 2-го блока</div>

Надо что бы при нажатии на переключатель (ссылку), скрылся один контент и появился другой, ну и соответственно наоборот. Подсказали что правильно сделать через атрибут data-*. Работать как я понял должно так:
При нажатии на переключатель(ссылку), data-key подставляется в три блока и появляется контент с нужными id - шниками, а с другими скрывается.
Не особо силен в jquery поэтому прошу помощи у вас.

Вопрос задан более трёх лет назад
95 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Максим Варава @Dillett Автор вопроса

Решил так, всем спасибо за помощь!

$(document).on('click', '.adress-link-contacts[data-key]', function() {
    $('.adress-link-contacts').removeClass('adress-link-active')
    $(this).addClass('adress-link-active')
    $('.adress-block, .ct-block-right, .adress-block-contact').css("display", "none")
      var key = $(this).data('key');
        $('#adress-'+key).show();
        $('#contact-img-'+key).show().css("display","flex");
        $('#contact-block-'+key).show()
});

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 11 часов назад
- 52 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 12 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 16 часов назад
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 17 часов назад
- 74 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 18 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 44 просмотра
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 58 просмотров
0

ответов
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Доработать телеграм бота

19 апр. 2024, в 03:52

1000 руб./за проект

Написать код на python

19 апр. 2024, в 03:01

1000 руб./за проект

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Решил так, всем спасибо за помощь!

$(document).on('click', '.adress-link-contacts[data-key]', function() { $('.adress-link-contacts').removeClass('adress-link-active') $(this).addClass('adress-link-active') $('.adress-block, .ct-block-right, .adress-block-contact').css("display", "none") var key = $(this).data('key'); $('#adress-'+key).show(); $('#contact-img-'+key).show().css("display","flex"); $('#contact-block-'+key).show() });

Answer 1 · 2018-07-11 21:29:03

Подсказали что правильно сделать через атрибут data-*

Ну да. Добавляете блокам такие же data-key, как у тех элементов, по клику на которые блоки надо показывать. По клику хватаете все блоки и показываете те, у которых data-key совпал с кликнутым, остальные скрываете:

$(document).on('click', 'a[data-key]', function() {
  $('div[data-key]')
    .hide()
    .filter((i, n) => n.dataset.key === this.dataset.key)
    .show();
});

Answer 2 · 2018-07-11 21:28:10

А это точно вопрос, а не задание?
Пиши , что не получилось в написании скрипта. А приведенный кусок кода - это голое задание...
В бутстрапе эта шняга есть готовая, в любой непонятной ситуации юзай бутстрап!
Скрипта-то там две строчки, тут посмотри - www.jooom.ru/toster/toster_6.html

$(document).ready ( function(){
	$('.faces_choice_area').find('span').live('click',function(){
		$(this).addClass('ch').siblings().removeClass('ch').parents('div.faces').find('span.faces_choice').eq($(this).index()).addClass('ch').siblings('span.faces_choice').removeClass('ch');
	});
	});

Как передать значение data в dom элементы?

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

Минуточку внимания

Войдите на сайт