Mit FBJS CSS ändern

Question

Ich bin ein bisschen ratlos durch die Facebook-Implementierung von Javascript. Ich möchte einen Listener auf einer Checkbox einrichten, so dass, wenn aktiviert, ändert sich die Klasse eines Elements, das ich nach ID erhalten kann.

Ich habe die Testkonsole verwendet und verschiedene Permutationen ausprobiert. Javascript ist NICHT meine erste Sprache, noch meine zweite, dritte ... COuld jemand helfen Sie mir, indem Sie meinen Pseudocode übersetzen?

<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} 
    } 

Offensichtlich ist dies nicht Javascript, aber das ist, wie ich am besten die Funktionalität erklären kann, die ich brauche. In meinen kurzen Tests scheint FBJS nicht einmal OnClick-Ereignisse zu registrieren. Vielen Dank!

Answer 1

FBJS hat seine eigene Getter und Setter. Das "checken" und das Setzen/Entfernen von Klassen sind unterschiedlich. Und Sie müssten die "rote" Klasse entfernen, wenn Sie die "grüne" Klasse hinzufügen, und umgekehrt. Oder, wenn Sie nur alle Klassen des Elements überschreiben möchten, können Sie stattdessen die Methode setClassName (class) verwenden. Ich werde die add/remove-Klassenmethoden in meiner Antwort verwenden, da sie weniger destruktiv ist.

FBJS Docs: Manipulating Objects

Für das Onclick-Ereignis, ich glaube, Sie sollen die addEventListener verwenden, wenn Onclick nicht funktioniert. Events in FBJS

Anstelle von this.checked verwendet FBJS getChecked. Wenn Sie also den Ereignis-Listener hinzufügen (für "Klicken"), fügen Sie "this.getChecked()" für das Argument hinzu.

setColor(this.getChecked()); 

Und für die Funktion: Auch wenn

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"); 
    } 
} 

Ich bin ein newb JS. I denke das ist richtig.

Answer 2

Für das Onclick-Ereignis Sie verwenden müssen ...

this.checked 

Dann wird Ihre Funktion wie folgt aussehen:

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

Answer 3

kmiyashiro ist meistens Recht mit Ausnahme der Getter und Setter für die Klassennamen es

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

Seit seiner nur eine Reihe meothod sein sollte, und es gibt keine entfernen Methoden, Sie müssen nicht darum kümmern, Entfernt man den Klassennamen, wird er einfach überschrieben.

Sehen Sie sich diese Liste für mehr Getter und Setter http://wiki.developers.facebook.com/index.php/FBJS#Manipulating_Objects