Javascript Girl
  1. Javascript Girl
  3. Modification dynamique de la couleur de fond avec jquery
Intereting Posts
Jquery clone-able inputs foreach écrase les valeurs JQuery Ajax – comment obtenir des données de réponse par erreur Créer un nouveau nœud en jstree Validation d'expression régulière de la boîte postale Comment déclencher la touche Entrée, appuyez sur la zone de texte? Quelle est la meilleure façon de télécharger des fichiers dans un navigateur moderne Javascript flou-cliquez sur ne pas travailler ensemble Masquer l'option en sélection basée sur une autre valeur de sélection Trouvez l'emplacement de l'utilisateur en utilisant jQuery / JS (sans google geolocation api)? Jquery on flur validation Déterminer quand défile vers le bas d'une page avec Javascript Sort Array Object with Multiple Keys: Javascript Comment créer un bouton de basculement dans Bootstrap Vérification du fragment d'URL pour un mot-clé Supprime le premier caractère d'une chaîne en Javascript

Modification dynamique de la couleur de fond avec jquery

À l'heure actuelle, il y a une partie de ma page qui contient une liste d'objets. Lorsque vous passez sur eux, l'arrière-plan devient de couleur jaune pâle et revient en blanc lorsque vous passez la souris. Je veux que l'un des objets se transforme en fond vert lorsqu'une condition est remplie, puis retourne à la normale si elle n'est pas satisfaite.

J'ai ce qui se passe avec un problème: si la condition est remplie, elle change de couleur et, si elle l'est, je l'ai fait redonner au blanc. Mais maintenant, le mouseover jaune clair ne fonctionnera pas. Le reste devient jaune mais cette partie reste blanche. Je ne sais pas comment "annuler" mes modifications de couleur verte afin de maintenir correctement le mouseover / mouseout. De l'aide? Voici mon code. 

if($myID.text() === schedule.content().myId){ $myID.css("background-color", "#AEAF93"); $stn.css("background-color", "#AEAF93"); $miles.css("background-color", "#AEAF93"); $worktag.css("background-color", "#AEAF93"); }else{ $myID.css("background-color", "#FFFFFF"); $stn.css("background-color", "#FFFFFF"); $miles.css("background-color", "#FFFFFF"); $worktag.css("background-color", "#FFFFFF"); } $('#chevron').on('click', function() { if($myID.text() === schedule.content().myId){ $myID.css("background-color", "#AEAF93"); $stn.css("background-color", "#AEAF93"); $miles.css("background-color", "#AEAF93"); $worktag.css("background-color", "#AEAF93"); }else{ $myID.css("background-color", "#FFFFFF"); $stn.css("background-color", "#FFFFFF"); $miles.css("background-color", "#FFFFFF"); $worktag.css("background-color", "#FFFFFF"); } }); $sideBar.find('.myList').bind("mouseover", function(){ var color = $(this).css("background-color"); $(this).css("background", "#fffccc"); $(this).bind("mouseout", function(){ $(this).css("background", "#fff"); }); });

Essaye ça : 

 var bg = "#FFFFFF"; if($myID.text() === schedule.content().myId) { bg = "#AEAF93"; } $myID.css("background-color", bg); $stn.css("background-color", bg); $miles.css("background-color", bg); $worktag.css("background-color", bg); /* the above can be done in one line : $("#element1,#element2,#element3,#element4").css("background-color", bg); */ $('#chevron').on('click', function() { $myID.css("background-color", bg); $stn.css("background-color", bg); $miles.css("background-color", bg); $worktag.css("background-color", bg); /* the above can be done in one line : $("#element1,#element2,#element3,#element4").css("background-color", bg); */ }); $sideBar.find('.myList').bind("mouseover", function(){ $(this).css("background", "#fffccc"); }).bind("mouseout", function(){ $(this).css("background", bg); });

D'accord, alors le problème semble être que vous avez un mouseover et un clic qui entrent en conflit les uns avec les autres parce que, évidemment, le mouseover déclenchera d'abord, puis onclic va déclencher, à moins que vous ne vous rendez et ne le déclenchez pas.

Essayez cela peut-être 

 $("div input").hover(function() { //Do you });

Finalement, j'ai trouvé ma réponse à cela.

CSS 

 .highlightedClass{ background-color: #AEAF93; }

JAVASCRIPT 

  //if condition if($td_ID.text() === schedule.content().idInFirstColumn){ $2nd_tr.addClass("highlightedClass"); }else{ if($2nd_tr.hasClass("highlightedClass")){ $2nd_tr.removeClass("highlightedClass"); } } $('#viewResultsButton').on('click', function(){ if($td_ID.text() === schedule.content().idInFirstColumn){ $2nd_tr.addClass("highlightedClass"); }else{ if($2nd_tr.hasClass("highlightedClass")){ $2nd_tr.removeClass("highlightedClass"); } } }); //else condition if($td_ID.text() === schedule.content().idInFirstColumn){ $tr.addClass("highlightedClass"); }else{ if($tr.hasClass("highlightedClass")){ $tr.removeClass("highlightedClass"); } } //outside of huge if/else/for loop mess. $('#viewResultsButton').on('click', function(){ var flag= false; $('#alteratePlan > tbody > tr').each(function() { $td_ID = $(this).find('.td_id'); if($td_ID.text() === ''){ if(flag === true){ $(this).addClass("highlightedClass"); flag= true; } }else{ if($td_ID.text() === schedule.content().idInFirstColumn){ if($(this).hasClass("highlightedClass")){ flag= true; }else{ $(this).addClass("highlightedClass"); flag= true; } }else{ flag= false; if($(this).hasClass("highlightedClass")){ $(this).removeClass("highlightedClass"); } } } }); });