Как установить новый класс не применяется на Bootstrap и JQuery?

Question

Смысл функции в том, чтобы сделать столбец в строке больше или меньше и сделать это, изменив имя класса на javascript.

Строка и столбец определяются Bootstrap обычно:

<div class="row">
    <div id="myColumn" class="col-lg-5">
        <!-- Some Content -->
    </div>
</div>

Теперь, если я установлю классы элемента #myColumn, изменений не будет ни в видимом, ни в HTML.

Я пробовал следующее:

1) $element.attr("class", classes);

2) $element.prop("class", classes);

3) document.getElementById("myColumn").className = classes;

4) $element.attr("class", null); $element.attr("class", classes);

5) Очень неловкие и уродливые попытки обойти, но ни одна из них не увенчалась успехом

Изменение не применяется вообще, однако, если я запускаю команду из консоли браузера, она запускается, как и ожидалось, но не из сценария. Скрипт каждый раз свежий, не кешируется.

Забавный факт: когда я делаю следующее: $element.attr("class", null); классы исчезают, но когда я ввожу имена классов, это как .attr("class", null); не действует и ничего не происходит.

Вот фрагменты кода JavaScript:

var biggerCol = ($element) => {
    var newClasses = [];
    var classes = $element.attr("class").split(' ');

    for(var index in classes) {
        if(classes[index].startsWith("col-")) {
            var splitted = classes[index].split('-');
            newClasses.push("col-" + splitted[1] + "-" + (parseInt(splitted[2]) + 1));
        }
        else {
            newClasses.push(classes[index]);
        }
    }

    console.log(newClasses.join(' '));
    $element.attr("class", newClasses.join(' '));
};

var smallerCol = ($element) => {
    var newClasses = [];
    var classes = $element.attr("class").split(' ');

    for(var index in classes) {
        if(classes[index].startsWith("col-")) {
            var splitted = classes[index].split('-');
            newClasses.push("col-" + splitted[1] + "-" + (parseInt(splitted[2]) - 1));
        }
        else {
            newClasses.push(classes[index]);
        }
    }


    $element.attr("class", newClasses.join(' '));
}

Как видите, console.log возвращается следующее:

col-lg-5 col-md-5 col-sm-7 col-xs-13 column1 to-left-column als-vertical, что соответствует ожиданиям и соответствует тому, что я хочу.

Я предполагаю, что это связано с Bootstrap и jQuery.

Answer 1

Проблема в том, что порядок, по которому класс является рангом. Один из способов сделать это - поместить тег !important в свой пользовательский CSS. Однако вы можете попытаться добавить свой пользовательский класс на первую позицию.

Скажите, если вам нужна дополнительная помощь!

Answer 2

Таким образом, я столкнулся с проблемой, которая была вызвана вызовом обеих функций на одном и том же селекторе, который закончился, как будто он не показывал никаких изменений, но он просто перезагружал себя.

Проблема была в неправильном селекторе ввторая функция (столбец меньшего или большего размера).