Comment puis-je vérifier pour une valeur css à l'aide de jQuery?

Une fois que l'utilisateur clique sur une ligne du tableau, je le veux pour vérifier si la ligne de la table de la couleur de fond est blanc, et si oui, il va changer la couleur de la lumière bleue.

Le code que j'utilise est de ne pas travailler. Ici, il est:

$("#tracker_table tr#master").click(function(){
  if($(this).css("background-color") == "#FFFFFF") { 
    $(this).css("background-color", "#C2DAEF");
  }
});

Je pense qu'il ya quelque chose de mal avec mon instruction if. Comment puis-je vérifier pour une valeur css à l'aide de jQuery?

Vous voudrez peut-être jeter un oeil à ce blog à Comparer les Couleurs avec JavaScript. Apparemment différents navigateurs représenter les couleurs différemment, ou n'en 2005.

OriginalL'auteur zeckdude | 2010-05-31

  1. 21

    Dirait qu'il revient sous la forme rgb(x, y, z), de sorte que votre code devrait être:

    $("#tracker_table tr#master").click(function(){
  if($(this).css("background-color") == "rgb(255, 255, 255)") { 
    $(this).css("background-color", "#C2DAEF");
  }
});

    Modifier: cela étant dit, je vous suggérons d'utiliser les classes au lieu de l'inspection/la configuration des propriétés css directement. Quelque chose comme ceci:

    $("#tracker_table tr#master").click(function(){
  if(!$(this).hasClass("selected")) { 
    $(this).addClass("selected");
  }
});

    Css:

    tr { background-color: #FFFFFF; }
tr.selected { background-color: #C2DAEF; }
    Cela ne fonctionne toujours pas. Il ya quelque chose de mal avec mon instruction si, parce que j'ai essayé d'ajouter une alerte dans l'instruction if et il n'a jamais alerté, donc je sais pas si l'instruction ne fonctionne pas correctement.
    Quel navigateur êtes-vous tester? Je ne vois pas le moindre problème avec votre instruction if & la rgb(...) format est certainement retourné dans firefox & webkit, à tout le moins, mais peut-être que ça dépend du navigateur que @R0MANARMY suggère dans son commentaire sur votre question (en général jQuery essaie de cacher ces croix navigateur bizarreries)... Vous pouvez essayer mon 2ème suggestion dans l'édition ci-dessus.

    OriginalL'auteur Alconja

  2. 3

    Tout ce qui peut, en effet vous êtes le stockage de l'information sous forme de couleurs, puis de les récupérer et de comparaison de ces informations plus tard. Alconja suggère une approche qui fonctionne, mais en fin de compte, il peut être préférable de travailler avec des classes, dont les noms peuvent être définis par vous pour réaliser une signification appropriée. C'est beaucoup plus convivial et moins cassants avoir quelque chose comme ceci:

    $('#tracker_table tr#master').click( function(){
    if ( $(this).hasClass('something') ) {
        $(this).removeClass('something').addClass('something_else');
    }
})
    C'est probablement la voie à suivre, je suppose que les couleurs ont une sorte de sens comme "ligne sélectionnée" ou autres joyeusetés.
    Que faire si votre projet de décision des parties prenantes que, quel que soit le blanc signifie maintenant, ils préfèrent qu'il soit gris clair? Non, pas que le gris, l'autre gris. Et faire que le bleu un peu plus verte, trop. En utilisant les noms de classe sémantique signifie un changement simple dans votre feuille de style, et votre code continue à dire ce qu'il dit. Si c'est juste "sélectionnées", alors oui, c'est assez facile. tr class="selected", et pas de classe.

    OriginalL'auteur Ken Redler