Использование FBJS для изменения CSS

Question

Я немного озадачен внедрением Facebook Javascript. Я хочу настроить прослушиватель на флажке, чтобы при проверке он менял класс элемента, который я могу получить по ID.

Я использовал тестовую консоль и попробовал различные перестановки. Javascript НЕ мой первый язык, ни мой второй, третий ... К кому мне помочь, переведя мой псевдокод?

<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 имеет свои собственные методы получения и установки. «Проверять» и устанавливать/удалять классы разные. И вам придется удалить «красный» класс, если вы добавляете «зеленый» класс, и наоборот. Или, если вы просто хотите перезаписать все классы элемента, вместо этого вы можете использовать метод setClassName (class), я буду использовать методы класса add/remove в своем ответе, поскольку он менее разрушительный.

FBJS Docs: Manipulating Objects

Для события OnClick, я думаю, вы должны использовать addEventListener если OnClick не работает. Events in FBJS

Вместо this.checked, FBJS использует getChecked. Поэтому, когда вы добавляете прослушиватель событий (для «click»), добавьте «this.getChecked()» для arg.

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

Я Newb 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 в основном подходит для геттеров и сеттеров для имени класса за исключением того, должно быть

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

С его просто набором meothod и нет методов удалить, вам не нужно беспокоиться о удалив имя класса, он просто будет перезаписан.

проверить этот список для более добытчиков и сеттеров http://wiki.developers.facebook.com/index.php/FBJS#Manipulating_Objects