Класс не добавляется но через консоль класс выводится, что делать?

Question

[H1TMARKER]

у меня есть код:

spoiler

$(document).ready(function() {
       
        $('.js-example-basic-single').select2({
            width: 300,
            minimumResultsForSearch: -1,
        }).on("select2:select", function (){
            let first=$('.select2-selection__rendered');
        changeColor(first);
        }).on('select2:open', function (){
            addCircle();
        });
    let firstTwo=$('.select2-selection__rendered');
    changeColor(firstTwo);
    function changeColor(elem){
        let list = elem[0].classList;
        if(list.length > 1){
           elem.removeClass(list[1]);
        }
        let a = elem[0].innerText;
        
        switch(a){
            case 'Kiev':
            elem.addClass('black-circle');
            break;
            case 'Odessa':
            elem.addClass('red-circle');
            break;
            case 'Harkiv':
            elem.addClass('green-circle');
            break;
        }
    }

});
function addCircle(elem){
            let a = elem.innerText;
            switch(a){
                case 'Kiev':
                elem.addClass('black-circle-two');
                break;
                case 'Odessa':
                elem.addClass('red-circle-two');
                break;
                case 'Harkiv':
                elem.addClass('green-circle-two');
                break;
                default:
                throw Error;
                break;
            }
    }

этот код при открытии списка select2 должен всем элементам списка давать кружок

• первому черный
  
• второму красный
  
• третьему зеленый
  
• а также должен добавлять выбраному элементу кружок в зависимости от выбора(уже сделал)
  

Когда я добавляю класс к каждому из элементов списка то они не добавляются, но через console.log(elem)
класс выводится.
Что делать?

Comments

[deepblack]

Правила вживання м'якого знака в українській мові

[Developer]

tsya.ru

Answer 1

[Николай Чуприк]

I.
Почти наверняка вы выводите лог в консоль и смотрите эффект добавления класса "глазами" в разные моменты времени. Поставьте точку останова на момент вывод лога и смотрите структуру документа. Уверен, всё будет совпадать.

Скорее всего в момент вывода лога класс действительно висит на элементе, но потом какая-то неведомая фигня тут же снимает класс обратно, и вы это не ловите. Трассируйте.

II.
Вот это плохо:

function changeColor(elem){
   let list = elem[0].classList;
        if(list.length > 1){
           elem.removeClass(list[1]);

Вы точно знаете, какой класс идёт в списке под номером 1? ClassList вам ничего не гарантирует. Вы же используете jQuery, так и убирайте конкретный класс, который хотите убрать.

III.
Функции addCircle должен передаваться аргумент elem, а в месте вызова в скобках ничего нет: addCircle().

Comments

[H1TMARKER]

ета часть кода уже зделана
и ее учитывать не нужно

Answer 2

[Exploding]

Как-то оно все так через Ж сделано, что хочется нажать ctrl+a и del.
Почему не определить цвет в data-атрибуте например, и при выборе его считать и применить? Или как оно там должно быть...
Код ниасилил, очень мудреный он у вас