SecurityYourFingers
@SecurityYourFingers
I make other things, but i know that without your

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

Есть много кнопок, которые делают 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]+'">'
        )
    });
}
  • Вопрос задан
  • 165 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
Заменить id на data-атрибут:

$('[data-index]').click(function() {
  $('#main__display').html(`<img src="${collect[this.dataset.index]}">`);
});
Ответ написан
@MrDecoy
Верставший фронтендер
Вариантов на самом деле хоть отбавляй.
Ну, начнём с того, что использовать селектор по 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] + '">'
        )
    }        
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
filgaponenko
@filgaponenko
frontend developer
Тут можно не навешивать обработчик на каждый из элементов, а использовать делегирование событий — вместо множества обработчиков навесить один обработчик на родителя.

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

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

Войти через центр авторизации
Похожие вопросы
Александрия Москва
от 200 000 до 250 000 руб.
Foodtronics Москва
от 100 000 до 200 000 руб.
от 5 500 до 6 500 usd.
21 авг. 2019, в 00:43
500 руб./за проект
21 авг. 2019, в 00:14
1000 руб./за проект