使用FBJS更改CSS

Question

我对Javascript在Facebook上的实现感到有点困惑。我想在复选框上设置一个侦听器，以便选中时，它会更改我可以通过ID获取的元素的类。

我一直在使用测试控制台，并尝试了各种排列。Javascript不是我的第一种语言，也不是我的第二、第三种语言...COuld有人能帮我翻译一下我的伪代码吗？

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

显然，这不是javascript，但这是我最好地解释我所需要的功能的方式。在我的简短测试中，FBJS似乎甚至没有注册onClick事件。谢谢!

Answer 1

FBJS有自己的getter和setter。获取“检查”和设置/删除类是不同的。而且，如果要添加red类，则必须删除green类，反之亦然。或者，如果您只想覆盖元素的所有类，您可以使用setClassName(class)方法，我将在我的答案中使用add/remove类方法，因为它的破坏性较小。

FBJS Docs: Manipulating Objects

对于onclick事件，我认为如果onclick不起作用，您应该使用addEventListener。Events in FBJS

FBJS使用getChecked而不是this.checked。因此，当您添加事件侦听器(用于click)时，请为arg添加一个this.getChecked()。

setColor(this.getChecked());

对于函数：

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

不过，我也是JS新手。我认为这是对的。

Answer 2

对于onclick事件，您需要使用...

this.checked

然后，您的函数将如下所示：

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

Answer 3

kmiyashiro除了类名的getter和setter之外，大部分都是正确的

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

因为它只是一个set方法，并且没有remove方法，所以你不需要担心移除类名，它只会被覆盖。

有关更多的getter和setter http://wiki.developers.facebook.com/index.php/FBJS#Manipulating_Objects，请查看此列表