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

Question

[Максим Варава]

Прошу помощи в написании небольшого скрипта.
Смысл такой что есть 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 поэтому прошу помощи у вас.

Comments

[Максим Варава]

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

$(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

[0xD34F]

Подсказали что правильно сделать через атрибут 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

[alex-1917]

А это точно вопрос, а не задание?
Пиши , что не получилось в написании скрипта. А приведенный кусок кода - это голое задание...
В бутстрапе эта шняга есть готовая, в любой непонятной ситуации юзай бутстрап!
Скрипта-то там две строчки, тут посмотри - 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');
	});
	});