Utiliser FBJS pour changer CSS

Question

Je suis un peu perplexe face à l'implémentation Facebook de Javascript. Je veux mettre en place un écouteur sur une case à cocher afin que, lorsqu'elle est cochée, elle change la classe d'un élément que je peux obtenir par ID. J'ai utilisé la console de test et essayé diverses permutations. Javascript n'est pas ma langue maternelle, ni ma seconde, ma troisième ... Quelqu'un peut-il m'aider en traduisant mon pseudo-code?

<input class="one" type="checkbox" onclick="setcolor(this.checkedornot)"> 
    function setcolor(checkedornot){ 
     if checkedornot == true {set p.one to p.one.GREEN} 
     if checkedornot == false {set p.one to p.one.RED} 
    } 

De toute évidence, ce n'est pas javascript, mais c'est ainsi que je peux expliquer la fonctionnalité dont j'ai besoin. Dans mes tests courts, FBJS ne semble même pas enregistrer les événements onClick. Merci!

Answer 1

FBJS a ses propres accesseurs. Obtenir "vérifié" et définir/supprimer des classes sont différents. Et, vous devrez supprimer la classe "rouge" si vous ajoutez la classe "verte", et vice versa. Ou, si vous voulez juste écraser toutes les classes de l'élément, vous pouvez utiliser la méthode setClassName (class) à la place, je vais utiliser les méthodes de classe add/remove dans ma réponse car elle est moins destructive.

FBJS Docs: Manipulating Objects

Pour l'événement onclick, je pense que vous êtes censé utiliser le addEventListener si onclick ne fonctionne pas.

Au lieu de cela, FBJS utilise getChecked. Donc, lorsque vous ajoutez l'écouteur d'événement (pour "clic"), ajoutez un "this.getChecked()" pour l'argument.

setColor(this.getChecked()); 

Et pour la fonction:

function setColor (isChecked) { 
    var p = document.getElementById(ID-OF-P); 
    if (isChecked) { 
     p.removeClassName("red"); 
     p.addClassName("green"); 
    } else { 
     p.removeClassName("green"); 
     p.addClassName("red"); 
    } 
} 

Je suis un JS newb aussi bien. Je pense c'est vrai.

Answer 2

Pour l'événement onclick vous devez utiliser ...

this.checked 

Ensuite, votre fonction ressemblera à ceci:

var setColor = function(isChecked) { 
    var myElement = document.getElementById("one"); 
    if (isChecked) { 
     myElement.className = "myGreenClass"; 
    } else { 
     myElement.className = "myRedClass"; 
    } 
}; 

Answer 3

kmiyashiro est surtout à droite, sauf pour les accesseurs pour le nom de classe il devrait être

if (isChecked) { 
    p.setClassName("green"); 
} else { 
    p.setClassName("red"); 
} 

Depuis sa juste un meothod de jeu et il n'y a pas de méthodes de supprimer, vous n'avez pas besoin de vous inquiéter En supprimant le nom de la classe, il sera simplement écrasé.

Consultez cette liste pour plus accesseurs http://wiki.developers.facebook.com/index.php/FBJS#Manipulating_Objects