Ne addClass en JQuery remplacent n'importe quelle classe css en fonction des styles?
J'essaye d'ajouter une classe d'éléments cliqué sur. Les éléments ont plusieurs clases déjà affecté dont une avec une bordure.
Même si je sais que je peux supprimer un courant de la classe CSS à l'aide removeClass() j'ai besoin d'autres styles de la classe. Donc, ce que je me demande est donné les exemples suivants, je ne peux pas remplacer un style de bordure avec addClass (), c'est que la frontière a une propriété déjà défini? Je ne veux pas utiliser les styles en ligne, car ils ne sont pas aussi faciles à entretenir.
CSS:
.dibHighlight{border:1px solid orange;}
JQuery ne fonctionne pas:
$(this).closest('.drop').addClass('dibHighlight'); //Doesn't work
JQuery qui fonctionne:
$(this).closest('.drop').css({ border: "1px solid orange" }); //Works
- Il doit y avoir quelques autres sélecteurs primordial votre
.dibHighlight
règle.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez remplacer d'autres classes à l'aide d'
addClass
selon les règles de CSS spécificité tout comme les classes CSS de correction d'hériter des propriétés les unes des autres lors de l'utilisation de laclass
l'attribut de l'élément.La raison de votre deuxième exemple fonctionne, c'est parce qu'il est équivalent à définir la
style
l'attribut de l'élément qui est à peu près le plus spécifique selon les spécificités CSS.À l'inverse, le premier exemple ne fonctionne pas car il n'y a probablement une classe CSS qui est plus spécifique puis
.dibHighlight
Il y a probablement une autre classe qui prend la priorité sur
dibHighlight
défini quelque part d'autre dans votre CSS. Vous devriez test de styles ou classes sont appliqués à votre élément à l'aide de Firebug (ou similaire outils de développement).Ou pour la sale quick fix, essayez ceci:
!important
, soit la classe est définie hors de la portée du document en quelque sorte ? (par exemple, vérifiez l'orthographe du nom de fichier css: c'est idiot, mais après de nombreuses heures de codage, il peut arriver 🙂 ). En tout cas, le seul moyen sûr de savoir ce qui se passe réellement est de sélectionner l'élément dans Firebug (ou similaires) et voir ce que les classes sont appliquées et que la classe qui remplace le style de bordure.La classe ci-dessous ne fonctionne pas car il ya une certaine classe existante dont le code est ci-dessous cette classe dans votre fichier css.
à faire ci-dessous le code du travail il suffit de coller le code css ci-dessus dans la dernière ligne de votre fichier css.
Après avoir fait cela, quand vous allez ajouter une classe dibHighlight avec addClass en jquery, il va se substituer à l'existant de catégorie similaire attribut.
Je suggère d'utiliser
toggleClass()
au lieu deaddClass()
parce que mêmetoggleClass()
fonctionne comme unaddClass()
dans le cas où la classe que vous souhaitez ajouter n'existe pas déjà.Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
L'ordre de la définition est le final/moins pondérée de différenciation de la préséance. Pour cette raison, je dirais que le fait de compter sur la priorité définie par l'ordre dans le fichier CSS, plutôt que de la spécificité n'est pas préférable.