Le but de la fonction est d'agrandir ou de réduire la colonne d'une ligne et de le faire en changeant le nom de la classe par javascript.

La ligne et la colonne sont généralement définies par Bootstrap :

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

Maintenant, si je définis les classes de l'élément #myColumn, il n'y a aucun changement ni visible ni dans le HTML.

J'ai essayé ce qui suit:

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) Tentatives très maladroites et laides de contourner, mais aucune n'a réussi

Il n'y a aucun changement appliqué, cependant si j'exécute la commande à partir de la console du navigateur, elle s'exécute comme prévu, mais pas à partir du script. Le script est à chaque fois frais, pas mis en cache.

Fait amusant : lorsque je fais ce qui suit : $element.attr("class", null); les classes disparaissent, mais lorsque j'entre les noms de classe, c'est comme si le .attr("class", null); ne prenait aucun effet et que rien ne se passait.

Voici les extraits du code 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(' '));
}

Comme vous pouvez le voir, le console.log renvoie :

col-lg-5 col-md-5 col-sm-7 col-xs-13 column1 to-left-column als-vertical qui est comme prévu et correct à ce que je veux.

Je suppose qu'il doit faire quelque chose avec Bootstrap et jQuery combinés.

-1
Tomáš Aresak Malčánek 13 mars 2019 à 21:32

2 réponses

Meilleure réponse

Je me suis donc retrouvé avec un problème causé par l'appel des deux fonctions sur le même sélecteur qui s'est terminé comme s'il ne montrait aucun changement, mais il s'est en quelque sorte réinitialisé.

Le problème était un mauvais sélecteur dans la deuxième fonction (colonne plus petite ou plus grande).

0
Tomáš Aresak Malčánek 19 mars 2019 à 10:24

Le problème est que l'ordre par lequel les classes sont classées. Une façon de le faire est de mettre la balise !important dans votre CSS personnalisé. Cependant, vous pouvez essayer d'ajouter votre classe personnalisée en première position.

Dites-moi si vous avez besoin d'aide supplémentaire !

1
Marin Mouscadet 14 mars 2019 à 10:42