0
votes

Comment attribuer des attributs différents à plusieurs éléments de la même classe en fonction de la valeur de texte avec jQuery

Ainsi, par exemple:

J'ai plusieurs éléments avec la classe du texte qui dit disponible , certains qui disent en attente , et certains qui disent vendu .

J'aimerais affecter un fond vert ceux qui disent disponibles , jaune à en attente et rouge sur Vendu . < / p>

J'ai essayé quelques-uns différents pour les boucles et ce que rien. Tout ce que j'ai pu faire travailler jusqu'à présent ne fait que tourner à chaque boîte verte, et je suppose que c'est parce que je ne suis pas itération correctement. La seule chose que je peux sembler avoir raison est xxx

modifie de manière fiable tous les arrière-plans au vert.

toute aide serait appréciée.


2 commentaires

Pourriez-vous publier l'ensemble du chunk HTML pour l'élément de . Liquide-texte ?


Pouvez-vous appliquer des cours de "disponibles", "en attente" et "vendu" à vos effondres?


3 Réponses :


0
votes

On dirait que vous ne pouvez pas écrire un sélecteur CSS qui correspond au texte de l'élément ( https://stackoverflow.com/ A / 1520469/8755370 ).

Vous pouvez plutôt boucler sur l'ensemble des listes et ajouter une autre classe pour chaque catégorie. Donc, tout aurait .listing-textes mais certains seraient .listing-disponibles-disponibles ou .listing-en attente . De là, vous pouvez écrire vos fonctions de jQuery comme celle que vous avez postée.


1 commentaires

C'est ce qui a fini de fonctionner. Merci pour l'aide.



1
votes

Voir les commentaires:

p>

<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>


0 commentaires

0
votes

Essayez les éléments suivants à l'aide de jQuery's .Chaque code> fonction.

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="listing-text">Available</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Pending</span>


1 commentaires

Wow, solution géniale. Direction différente de celle que je pensais, mais complètement résolu mon problème. Merci d'avoir pris le temps d'aider, Andrew.