Как «объединить» скрипт переключалки иллюстраций?

Question

[Даниил Тихонов]

Нашёл небольшой и достаточно удобный скрипт для "переключалки" иллюстраций. Он удобен и подходит тогда, когда на странице есть один такой блок. А вот если их несколько... Как можно "объединить" скрипт, дабы не прописывать отдельно его для каждого блока, для каждого индивидуального id?

Вот собственно сам код:

<div style="background-image: url(/images/01.jpg);">
<div style="background-image: url(/images/02.jpg);" id="pictures_1">
</div>
<div id="changepictures_1" href="javascript:void(0);" 
onclick="product_1('pictures_1');" data-text-show="Фото" 
data-text-hide="Схема">Схема</div>

<div style="background-image: url(/images/03.jpg);">
<div style="background-image: url(/images/04.jpg);" id="pictures_2"></div></div>
<div id="changepictures_2" href="javascript:void(0);" 
onclick="product_2('pictures_2');" data-text-show="Фото" 
data-text-hide="Схема">Схема</div>

<script>

function product_1(a) {
        var el = document.getElementById(a);
        var link = document.getElementById('changepictures_1');
        if (el.style.display == "block") {
            el.style.display = "none";
			$('#changepictures_1').removeClass('photo');
            link.innerText = link.getAttribute('data-text-hide');
        } else {
            el.style.display = "block";
			$('#changepictures_1').addClass('photo');
            link.innerText = link.getAttribute('data-text-show');
        }
};

function product_2(a) {
        var el = document.getElementById(a);
        var link = document.getElementById('changepictures_2');
        if (el.style.display == "block") {
            el.style.display = "none";
			$('#changepictures_2').removeClass('photo');
            link.innerText = link.getAttribute('data-text-hide');
        } else {
            el.style.display = "block";
			$('#changepictures_2').addClass('photo');
            link.innerText = link.getAttribute('data-text-show');
        }
};

</script>

Comments

[Модератор]

Даниил Тихонов, дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Anton fon Faust]

Вместо getElementById использовать querySeletorAll
Но, вообще, эти переключалки делаются без javascript: на одном только html и css.
https://jsfiddle.net/anton4ept/7oqs47f5/ - например, вот так.

Comments

[Даниил Тихонов]

Решение на html и css удобное в том случае, если клик на блоку меняет его, а у меня же клик в одном месте, а смена иллюстрации - в другом =)

[Anton fon Faust]

Даниил Тихонов, связываете label с checkbox посредством for и id - и разносите по каким хотите местам, главное, чтобы на одной странице были.