jQuery Girl
  1. jQuery Girl
  3. Changer le CSS en fonction de la valeur
Intereting Posts
DataTables 1.10 – Ne pas afficher les résultats jquery bascule changer l’image concernant le statut Comment obtenir le chemin complet du fichier à partir d’un fichier input Exception nsresult: emplacement «0x805e0006 ()» lors de la soumission de modifications à l’aide de x-editable in yii Ajouter une classe sur l’élément de chemin svg Les données .row () n’est pas défini Itérer et obtenir des valeurs uniques à partir de JSON pour certains index jquery selectMenu actualiser ne fonctionne pas Supprimer la couleur d’arrière-plan / les images pour tous les éléments avec jQuery jqGrid, définition de la couleur bg sur les cellules de colonne lorsque l’utilisateur clique sur son en-tête Problème d’animation de taille de police Jquery dans Chrome, trop lent Erreur 406 sur firebug uniquement Désélectionnez la ligne de la table d’amorçage dans des conditions spécifiques. Comment interdire les mots avec des signes diacritiques à l’aide d’un tableau de liste noire et de regex? jQuery si “this” contient

Changer le CSS en fonction de la valeur

On m’a demandé de mettre en œuvre une petite validation sur les valeurs et si les valeurs sont supérieures ou inférieures à 0, j’ai besoin de modifier ou d’append / de supprimer le fichier CSS pour les balises td et i

Ma table ressemble à quelque chose comme ça 

  
 Year Weeks 
   
 VAR (%)  -10.65% 
 
 VAR (diff)  -13,953 
 
 VAR (%)  8.81% 
 
 VAR (diff)  11,320

Actuellement, je suis en train de coder dur le css, mais j’aimerais pouvoir les modifier de manière dynamic, car les valeurs changent automatiquement. Quelqu’un peut-il suggérer le meilleur moyen d’archiver cela?

Je pensais dans ma demande Ajax de faire quelque chose comme ça: 

 var sdlyvar = $(parseFloat(".classname").text()); if (sdlyvar < 0){ $('.classname').removeClass(".classname").addClass("fa-level-down"); } else { $('.classname').removeClass(".classname").addClass("fa-level-up"); }

Utilisez JavaScript parseFloat pour parsingr le pourcentage ( http://www.w3schools.com/jsref/jsref_parsefloat.asp ). 

 var percent = $('#sdlyvar').text(); var result = parseFloat(percent) / 100.0; if (result < 0){ $('#sdlyvar').removeClass("fa-level-up"); $('#sdlyvar').addClass("fa-level-down") } else { $('#sdlyvar').removeClass("fa-level-down"); $('#sdlyvar').addClass("fa-level-up") }

Votre premier problème est que vous ne pouvez pas comparer une chaîne comme "-10.95%" avec un entier, à cause du symbole % final. Vous devez utiliser parseFloat sur cette valeur: 

 var sdlyvar = parseFloat($('#sdlyvar').text());

Il prendra en charge tous les éléments non numériques après le numéro.

Ensuite, vous voudrez probablement supprimer la classe opposée lors de la mise à jour: 

 if (sdlyvar < 0){ $('#sdlyvar').removeClass("fa-level-up").addClass("fa-level-down"); } else { $('#sdlyvar').removeClass("fa-level-down").addClass("fa-level-up"); }

Quelques suggestions aléatoires:

  1. Expliquez clairement ce qui ne va pas dans votre code lorsque vous publiez sur StackOverflow
  2. Lorsque vous var $sdlyvar = $("sdlyvar"); référence à un élément plusieurs fois avec jQuery, envisagez de placer la sélection dans une variable, comme var $sdlyvar = $("sdlyvar"); : plus rapide à taper et à exécuter.
  3. Économisez-nous des espaces lors de la publication du code: /

Ici, slice supprimera le signe% dans ce code et le rest du code comparera la valeur et assignera ou supprimera une classe 

 var sdlyvar = $('#sdlyvar').text(); if (sdlyvar.slice(0,-1) < 0){ $('#sdlyvar').removeClass("fa-level-up"); $('#sdlyvar').addClass("fa-level-down"); } else { $('#sdlyvar').removeClass("fa-level-down"); $('#sdlyvar').addClass("fa-level-up"); } 
 var lis=document.querySelectorAll("tr td i"); for(var i in lis){ if(parseInt(lis[i].innerHTML)<0){ lis[i].className+=" fa-level-down"; } else{ lis[i].className+=" fa-level-up"; } }