Как вместе с кодами стран менять и флаг?

Question

[tkachenkoaanna097]

https://jsfiddle.net/xd6u13rp/1/

Answer 1

[Пашенька]

document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
    this.querySelector('.custom-select').classList.toggle('open');
})

for (const option of document.querySelectorAll(".custom-option")) {
    option.addEventListener('click', function() {
        if (!this.classList.contains('selected')) {
            this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
            this.classList.add('selected');
            this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
            this.parentElement.previousElementSibling.style.backgroundImage = getComputedStyle(this).backgroundImage;
        }
    })
}

window.addEventListener('click', function(e) {
    const select = document.querySelector('.custom-select');
    if (!select.contains(e.target)) {
        select.classList.remove('open');
    }
});

Переписал ваш код на более рациональный:

const select = document.querySelector('.custom-select');

(function() {
    let input = select.firstElementChild,
        text = input.querySelector('span'),
        options = select.lastElementChild;
        
    select.addEventListener('click', function(ev) {
        this.classList.toggle('open');
        let el = ev.target;
        if (el.classList.contains('custom-option')) {
            options.querySelector('.selected').classList.remove('selected');
            el.classList.toggle('selected');
            text.textContent = el.textContent;
            input.style.backgroundImage = getComputedStyle(el).backgroundImage;
        }
    });
})();
 
window.addEventListener('click', function(e) {
    if (!select.contains(e.target)) {
        select.classList.remove('open');
    }
});

Comments

[tkachenkoaanna097]

Пашенька , спасибо
почему ужас?

[Пашенька]

tkachenkoaanna097, во-первых обработчики клика: вы их вешаете на каждый option, вместо того, чтобы повесить один обработчик на select и использовать делегирование. Каждый обработчик требует ресурсов компьютера, а теперь представьте себе, если option'ов будет очень много.

Далее: иррациональная выборка элементов. DOM операции - ооочень дорогие. Элементы нужно кешировать в переменных. Вместо того, чтобы выбирать элемент всякий раз при срабатывании обработчика, его можно закешировать вне тела обработчика. Делегирование бы позволило вам обходится this/this.firstElementChild/this.parentElement без каких-либо выборок внутри обработчика.

Не супер плохо, видел куда хуже, но можно лучше. И, по крайней мере, вы хотя бы на нативе пишите - это хорошо.

[Пашенька]

tkachenkoaanna097, Ещё, кстати, можете практически забыть о существовании parentNode и всех *Node, у которых есть похожие по называнию свойства с *Element. Вместо parentNode используйте parentElement. Ноды включают в себя текстовые узлы, комментарии в html, в то время когда Элементы - это непосредственно сами html теги. Вряд ли вам когда-либо понадобятся именно Ноды.

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

почему же не выбирается нужный элемент, он ведь должен!?!?

[tkachenkoaanna097]

Пашенька , извиняюсь
не переделаете?
не совсем пойму

[Пашенька]

tkachenkoaanna097, чего не понимаете?
Лениво мне переделывать. Следующий раз просто вешайте один обработчик на custom-select, вместо того, чтобы делать это в цикле на каждый option. У такого подхода есть ещё один плюс: если вы будете динамически добавлять option'ы, то код будет работать и для новых элементов, а ваш уже не сработает для вновь добавленных элементов.

[Пашенька]

tkachenkoaanna097, Хорошо, я переписал ваш код :) см. ответ^^^

[tkachenkoaanna097]

Пашенька, спасибо огромное)
а почему удалить?
вроде ж итак работает

Только удалите класс selected из начальной разметки.

[Пашенька]

tkachenkoaanna097, Оно то работало, но я забыл об удалении selected классов, теперь поправил. Теперь не удаляйте его из начальной разметки.