Как сократить код?

Question

[Magnus Keef]

Есть много кнопок, которые делают innerHTML. Как при добавлении новых кнопок сделать так, чтоб функцию для новой кнопки не писать?

function test() {
    $('#0').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[0]+'">'
        )
    });
    $('#1').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[1]+'">'
        )
    });
    $('#2').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[2]+'">'
        )
    });
    $('#3').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[3]+'">'
        )
    });
    $('#4').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[4]+'">'
        )
    });
    $('#5').on("click",function () {
        $("#main__display").html(
            '<img src="'+collect[5]+'">'
        )
    });
}

Comments

[Чак Торнтон]

Полагаю, здесь можно цикл for использовать и при добавлении новой кнопки делать просто i++

Answer 1

[0xD34F]

Заменить id на data-атрибут:

$('[data-index]').click(function() {
  $('#main__display').html(`<img src="${collect[this.dataset.index]}">`);
});

или

document.querySelectorAll('[data-index]').forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  this.innerHTML = `<img src="${collect[e.target.dataset.index]}">`;
}.bind(document.querySelector('#main__display')));

Answer 2

[Вадим]

Вариантов на самом деле хоть отбавляй.
Ну, начнём с того, что использовать селектор по ID это контрпродуктивно и ведёт к хаосу и разбуханию.
Судя по Вашему коду, Вы хотите чтобы каждая следующая кнопка показывала соответствующую по индексу картинку из коллекции.
В таком случае, можно опираться на индексы.
То есть:
1) назначаем кнопкам уникальный класс
2) матчимся в селекторе на этот класс,
3) назначаем обработчик клика,
4) в обработчике клика получаем индекс данной кнопки,
5) подставляем индекс в коллекцию, чтобы вытащить нужный путь до картинки.
6) Профит.

Но, выше уже сказали про делегирование. Чем оно лучше чем то , что я выше описал? У вас всего один обработчик, на один элемент - контейнер кнопок. Так как события всплывают, то можно перехватывать на родительском элементе всплывшее событие клика и запускать вышеуказанную обработку. Таким образом, один обработчик лучше чем много, согласитесь :-) И не нужно париться чтобы довешивать обработчики на динамически сгенерирванные кнопки.
Итак, пример:

HTML:

<div id="main__display"></div>
<div class="images-controls">
    <button type="button" class="images-controls__btn">1</button>
    <button type="button" class="images-controls__btn">2</button>
    <button type="button" class="images-controls__btn">3</button>
    <button type="button" class="images-controls__btn">4</button>
</div>

JS:

var collection = [
    "https://via.placeholder.com/100",
    "https://via.placeholder.com/200",
    "https://via.placeholder.com/300",
    "https://via.placeholder.com/400",
]

// Добавляем обработчик на контейнер кнопок
$('.images-controls').on('click', function(evt){
    // evt - Объект события.
    // Элемент, на котором произошёл клик:
    var target = evt.target; 

    // проверяем, есть ли у этого элемента класс, присущий нашим кнопкам:
    if(target.classList.contains('images-controls__btn')){
        var btnIndex = $('.images-controls__btn').index(target); // Находим индекс этой кнопки из массива всех кнопок.
        // Рендерим картинку, извлекая путь до картинки по индексу кнопки из коллекции
        $("#main__display").html(
            '<img src="' + collection[btnIndex] + '">'
        )
    }        
});

Answer 3

[Филипп Гапоненко]

Тут можно не навешивать обработчик на каждый из элементов, а использовать делегирование событий — вместо множества обработчиков навесить один обработчик на родителя.

Это позволит не навешивать обработчики заново при добавлении новых элементов и не заботиться об удалении обработчиков из памяти при удалении элементов.