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]+'">'
        )
    });
}
  • Вопрос задан
  • 168 просмотров
Решения вопроса 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
Тут можно не навешивать обработчик на каждый из элементов, а использовать делегирование событий — вместо множества обработчиков навесить один обработчик на родителя.

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

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

Войти через центр авторизации
Похожие вопросы