Как преобразовать такой код в массив?

Question

[Юлия Остапенко]

Стоит задача: по клику на кнопку отображать привязанный к ней объект. Дано множество кнопок и множество привязанных к ним элементов (по одному на каждую). При клике на кнопку А отобразить элемент В, при клике на С отобразить D и т.д.
Написала такой код - отображение каждого элемента реализуется через добавление к нему класса .show, содержащего свойство display:block.

var houseBaseBuy = document.querySelector(".house-base-buy");
        var houseBase = document.querySelector(".house-base"); 
            houseBaseBuy.addEventListener("click", function(event) { 
            houseBase.classList.add("show");   });   

        var houseWallsBuy = document.querySelector(".house-walls-buy");
        var houseWalls = document.querySelector(".house-walls");  
            houseWallsBuy.addEventListener("click", function(event) { 
            houseWalls.classList.add("show");   });

В принципе, задачу решает, все работает. Проблема в том, что кнопок и элементов - несколько десятков, и такой код придется дублировать десятки раз. Нутром чую, что задача намного проще и изящнее решается через массивы или объекты. Но не могу понять, как преобразовать в массив этот код.
Я новичок в JS, честно гуглила, но пока не хватает базовых знаний для решения такой проблемы.
Заранее спасибо.

Answer 1

[Микола Деревло]

function clickToShow(elementClick, elementShow){
	var elButton = document.querySelector(elementClick);
	var elShow = document.querySelector(elementShow);
	
	elButton.addEventListener("click", function(event) {
		elShow.classList.add("show");
	});
}

clickToShow('#London','#London h2');
clickToShow('.house-base-buy','.house-base');
clickToShow('.house-walls-buy','.house-walls');

Comments

[Юлия Остапенко]

Спасибо! Это сокращает 4 строки кода на каждый прогон до одной.

Answer 2

[ThunderCat]

самое очевидное - элементам кнопкам давать дата атрибут, содержащий ид или класс элемента отображения.
тогда код примерно такой:
HTML

<button class="showbutton" data-elementid='element55'>покажи 55!</button>

JQ

$('.showbutton').on('click',function(){
    var id = $(this).data('elementid');
    $('#'+id).show(); // если по второму клику надо скрывать элемент - меняем шоу на тоггл.
})

UPD: на нативном не сильно отличается, смысл не хранить в массивах, а использовать собственные свойства элемента для хранения связей. Это гибко и правильно.
native JS

document.querySelector(".house-base-buy").addEventListener("click", function(event) { 
    var id = this.getAttribute('data-type');
    document.querySelector("#"+id).classList.add("show");
})

Comments

[Юлия Остапенко]

К сожалению, я еще не знаю JQ, только начала изучать нативный JS. Поэтому не могу оценить вашего решения. Непременно попробую его немного позже, когда дойду до JQ.

[ThunderCat]

Юлия Остапенко, дополнил более "понятным" для вас нативом. Смысл однако не меняется - не храните связи отдельно, для этого есть атрибуты хранения в элементах. Это более гибкое решение, в код отдельно не надо ничего добавлять когда вы добавите еще пару связанных элементов.

[Юлия Остапенко]

ThunderCat, теперь поняла, благодарю!