Ajout et suppression dynamiques de CSS

Question

J'ai une barre de résistance de mot de passe qui utilise li qui sont stylisés avec des couleurs différentes pour indiquer à l'utilisateur la force de son mot de passe, comme ceci :

<input type="password" name="password" id="password" placeholder="Password">

<ul id="passwordStrength">
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
</ul>

Lorsqu'un critère de regEx a été satisfait par une série de if les déclarations, les counter est incrémenté et un switch puis ajoute les CSS nécessaires background à chaque li en fonction de l'élément counter valeur.

var password_li = $('#passwordStrength').find('li');

var counter = 0;

if(pw.match(/[A-Z]/) && pw.match(/[a-z]/)) {
    counter++;
}

//further regex if statements

switch(counter) { //patrick
    case 0:
    break;
    case 1:
        $(password_li[0]).css('background', '#e30613'); //first li

    break;
    case 2:
        $(password_li[0]).css('background', '#e30613'); //first li
        $(password_li[1]).css('background', '#f9b233'); //second li         

    break;
    case 3:
        $(password_li[0]).css('background', '#e30613'); //first li
        $(password_li[1]).css('background', '#f9b233'); //second li                 
        $(password_li[2]).css('background', '#53ab58'); //third li                  

    break;
    case 4:
        $(password_li[0]).css('background', '#e30613'); //first li
        $(password_li[1]).css('background', '#f9b233'); //second li             
        $(password_li[2]).css('background', '#53ab58'); //third li                                  
        $(password_li[3]).css('background', '#418746'); //fourth li 
    break;
}

Cela ne semble pas être la manière la plus efficace de styliser l'élément li articles. De plus, si l'utilisateur supprime ensuite la valeur qu'il a saisie, l'élément li Les éléments conservent la couleur qui leur a été attribuée, au lieu de revenir à leur couleur par défaut, le gris, ce qui est logique puisqu'il n'existe pas de fonction permettant de supprimer le style. Je peux ajouter du gris à l'élément li articles en fonction de ce que case a été respecté dans le switch comme suit :

case 1:
    $(password_li[0]).css('background', '#e30613');
    $(password_li[1]).css('background', '#dcdcdc');                 
    $(password_li[2]).css('background', '#dcdcdc');                 
    $(password_li[3]).css('background', '#dcdcdc');                             
break;

Mais là encore, cette approche ne semble pas la plus efficace.

Question

Comment puis-je aborder cette fonctionnalité de manière à ce que le style de l'élément li peuvent être ajoutés et supprimés de manière dynamique ?

Voici un JSFiddle

Answer 1

Tout d'abord, il existe en fait une méthode pour supprimer le style. Il suffit de le mettre à zéro :

$(password_li[0]).css({
    background: ""
});
// I guess that can be done inline too
$(password_li[0]).css("background", "");

Mais si vous préférez le faire avec moins d'itérations, vous pouvez le faire avec des classes CSS. Il suffit de donner une classe à l'élément parent et la classe aura une valeur de nth-child qui définira la couleur de chaque enfant, individuellement, en fonction de sa position.

<style>
    .list1 > li:nth-child(1) {
        background: #e30613;
    }
    .list2 > li:nth-child(2) {
        background: #f9b233;
    }
    .list3 > li:nth-child(3) {
        background: #53ab58;
    }
    .list4 > li:nth-child(4) {
        background: #418746;
    }
    .list5 > li:nth-child(5) {
        background: red;
    }
    .list6 > li:nth-child(6) {
        background: blue;
    }
</style>
<input type="password" name="password" id="password" placeholder="Password">

<ul id="passwordStrength">
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
</ul>

Ensuite, vous pouvez ajouter les classes au parent en fonction du compteur, comme ceci

counter && $("#passwordStrength").addClass("list" + counter);

Et les retirer lorsqu'ils ne sont pas nécessaires

while(counter) {
    $("#passwordStrength").removeClass("list" + counter--);
}

De cette façon, vous pouvez avoir les styles dans un autre fichier, comme cela est recommandé, au lieu d'utiliser le style en ligne, qui est déconseillé.

Violon : https://jsfiddle.net/b6jfgyvy/

Answer 2

Je vous recommande d'ajouter/supprimer des classes CSS plutôt que de manipuler les règles CSS.

Vous pouvez persister la classe à ajouter avec <li> en utilisant un élément personnalisé data-* attribut préfixé.

Ensuite, vous pouvez cibler les éléments sur lesquels les classes doivent être ajoutées en utilisant la commande .filter() et :lt() sélecteur.

Violon

$(document).ready(function() {
  var password_li = $('#passwordStrength').find('li');
  $('#password').bind('keyup', function() {
    var counter = 0;
    var pw = $(this).val();

    if (pw.length >= 8) {
      counter++;
    }
    if (pw.match(/\d/)) { //match digit
      counter++;
    }
    if (pw.match(/[A-Z]/) && pw.match(/[a-z]/)) { //match digit
      counter++;
    }
    if (pw.match(/[$@$!%*#?&]/)) { //match digit
      counter++;
    }
    //Get all classes to remove
    var clssesToRemove = password_li.map(function() {
      return $(this).data('matched-class');
    }).get().join(' ');

    //Remove all class
    password_li.removeClass(clssesToRemove);

    //Filter and add class
    password_li.filter(':lt(' + counter + ')').each(function() {
      $(this).addClass($(this).data('matched-class'));
    });

  })
})

ul#strength {
  display: inline;
  list-style: none;
  padding: 0;
  vertical-align: 2px;
}

.point-reg {
  background: #DDD;
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  margin-right: 2px;
  width: 30px;
}

.first {
  background-color: #e30613;
}

.second {
  background-color: #f9b233;
}

.third {
  background-color: #53ab58;
}

.fourth {
  background-color: #418746;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="row">
  <div class="col-xl-8 offset-xl-2">
    <div class="form-group row">
      <div class="col-md-12">
        <input type="password" name="password" class="form-control pill-radius font-body" id="password" placeholder="Password">
      </div>
      <div class="form-group row">
        <div class="col-md-12">
          <ul id="passwordStrength">
            <li class="point-reg" data-matched-class="first"></li>
            <li class="point-reg" data-matched-class="second"></li>
            <li class="point-reg" data-matched-class="third"></li>
            <li class="point-reg" data-matched-class="fourth"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Vous pouvez peut-être faire quelque chose comme ça

colours = [
    '#e30613',
    '#f9b233',
    '#53ab58',
    '#53ab58'
];

for (i = 0; i < counter; i++) {
    $("password_li[" + i + "]").css('background', colours[i]);
}

Vous pouvez réinitialiser toutes les couleurs en :

$("password_li").css('background', '#dcdcdc');