lorsque tous les articles sont marqués de vert?
J'ai fait une liste de contrôle. Maintenant, je veux montrer un texte lorsque toutes les cases à cocher sont vertes. Je ne sais pas comment puis-je compter la case à cocher. Quelqu'un qui peut m'aider à ce code?
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <h2>Checklist</h2> <ul> <li><i class="fas fa-check-square"></i> Item 1</li> <li><i class="fas fa-check-square"></i> Item 2</li> <li><i class="fas fa-check-square"></i> Item 3</li> <li><i class="fas fa-check-square"></i> Item 4</li> <li><i class="fas fa-check-square"></i> Item 5</li> <li><i class="fas fa-check-square"></i> Item 6</li> <li><i class="fas fa-check-square"></i> Item 7</li> <li><i class="fas fa-check-square"></i> Item 8</li> <li><i class="fas fa-check-square"></i> Item 9</li> <li><i class="fas fa-check-square"></i> Item 10</li> </ul> <button id="reset">Reset checklist</button> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
3 Réponses :
Que diriez-vous de garder un comptoir de boutons verts? Pour cela, vous devez déclarer une variable, par ex. Var Nombre = 0; code>, alors chaque fois qu'une touche tourne vert augmente le compteur, chaque fois que la réinitialisation est cliquée, réinitialisez le nombre de comptes. Ensuite, si le compteur atteint un certain nombre, faites ce que vous voulez faire: var count = 0;
$("i").click(function() {
$(this).css("color", "#5c8c44");
$(this).parent().css("font-weight", "bold");
count += 1;
if(count > 5) { /*...*/ }
});
//...
Merci beaucoup! Grande aide !! Puis-je imprimer la valeur du comte var? Par exemple: "Vous avez marqué (comptez) / 10 articles?"
Créez une chaîne var string = "Vous avez marqué {Nombre} / 10 éléments"; et remplacez ce texte spécifique avec le compte. string.replace ('{compte}', compte); . Ensuite, mettez cette chaîne sinon que vous voulez. IE: $ ('p'). Texte (chaîne);
Essayez ici: https://jsfiddle.net/3c0uskly/ https://jsfiddle.net/83jcvalr/
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <h2>Checklist</h2> <p id=count1></p> <ul> <li><i class="fas fa-check-square"></i> Item 1</li> <li><i class="fas fa-check-square"></i> Item 2</li> <li><i class="fas fa-check-square"></i> Item 3</li> <li><i class="fas fa-check-square"></i> Item 4</li> <li><i class="fas fa-check-square"></i> Item 5</li> <li><i class="fas fa-check-square"></i> Item 6</li> <li><i class="fas fa-check-square"></i> Item 7</li> <li><i class="fas fa-check-square"></i> Item 8</li> <li><i class="fas fa-check-square"></i> Item 9</li> <li><i class="fas fa-check-square"></i> Item 10</li> </ul> <p id=count></p> <button id="reset">Reset checklist</button> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
Merci de convertir mon commentaire en un extrait et un violon aussi :). Bien que vous ayez oublié de supprimer ces classes en cliquant sur RESET. Alors votre extrait échouerait
Existe-t-il une option où je peux montrer la valeur du nombre de var celles?
Oui, vous pouvez utiliser une étiquette ou une carte d'identité de l'étiquette ajoutée. Ajoutez-la, si ma réponse est vraiment utile, puis l'achemeut et vérifiez comme des ans corrects. J'ajoute juste une autre condition où vous décochez la même chose qui est vert aussi.Veuillez le vérifier.
Merci, j'ai suscité votre réponse! Est-ce une option d'ajouter un compte comme:
Vous avez marqué (comptage) / 10 boîtes si (comptez = 10)
Vous avez tout! ele
Vous n'avez pas tous les articles
Vous pouvez compter des éléments d'enfant d'UL. J'ai modifié votre code pour le résultat souhaité. Vous pouvez Vérifiez ici . J'ai créé une fonction pour vérifier la classe de couleur verte
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> <h2>Checklist</h2> <ul id="ul_class"> <li><i class="fas fa-check-square"></i> Item 1</li> <li><i class="fas fa-check-square"></i> Item 2</li> <li><i class="fas fa-check-square"></i> Item 3</li> <li><i class="fas fa-check-square"></i> Item 4</li> <li><i class="fas fa-check-square"></i> Item 5</li> <li><i class="fas fa-check-square"></i> Item 6</li> <li><i class="fas fa-check-square"></i> Item 7</li> <li><i class="fas fa-check-square"></i> Item 8</li> <li><i class="fas fa-check-square"></i> Item 9</li> <li><i class="fas fa-check-square"></i> Item 10</li> </ul> <div id="output"></div><button id="reset">Reset checklist</button>
Ce serait mieux si vous pouvez ajouter une classe pendant que vous le transformez en vert. Ensuite, vous pouvez obtenir les éléments par nom de classe et i balise et si les deux éléments comptent sont égaux, vous pouvez dire que toutes les vérificateurs sont vérifiés.
Pensez à utiliser une case à cocher et des étiquettes pour y parvenir. Non seulement c'est plus sémantique, il est plus accessible. Vous avez également le clic pour changer de fonctionnalité gratuitement sans JS!