Переключить цвет значка и изменить атрибут?

Question

Я использую fontawsome иконки как этот

<i class="fa fa-camera-retro fa-2x" data-permisssion="access" data-permission-value="true"></i> 
<i class="fa fa-area-chart fa-2x" data-permisssion="file" data-permission-value="false"></i> 
<i class="fa fa-cc-mastercard fa-2x" data-permisssion="loop" data-permission-value="true"></i> 

Что мне нужно на странице загрузки всех иконок, которые имеют данных-разрешительный значение = ложь иметь красный цвет, и другие имеют зеленый цвет, но когда пользователь переключится на этот значок, чтобы присвоить значение true и изменить цвет на зеленый. Когда пользователь снова нажимает на значок, чтобы вернуть это значение в false и изменить цвет на красный?

Здесь работает скрипку http://jsfiddle.net/DTcHh/1714/

Answer 1

вы можете использовать свои собственные классы внутри шрифта удивительных иконок. так просто создать эти два класса CSS:

.redIcon{ 
    color: red; 

} 
.greenIcon{ 
    color:green; 
} 

создали функцию щелчка, чтобы продемонстрировать изменения значений данных-разрешения. так как вы не хотите, чтобы изменить все шрифты удивительные иконки, добавить еще один класс, как toggableIcon к тем, которые должны быть toggable ...

$(".toggableIcon").click(function(){ 
    if($(this).attr("data-permission-value")=="true") 
{ 
    $(this) 
     .attr("data-permission-value", "false") 
     .removeClass("greenIcon") 
     .addClass("redIcon"); 
}else{ 
    $(this) 
     .attr("data-permission-value", "true") 
     .removeClass("redIcon") 
     .addClass("greenIcon"); 
} 

}); 

для начальной настройки цветовых классов,:

$(".toggableIcon").each(function(){ 
if($(this).attr("data-permission-value")=="true") 
{ 
     $(this).addClass("greenIcon"); 
}else{ 
    $(this).addClass("redIcon"); 
} 
}); 

увидеть скрипку здесь: http://jsfiddle.net/DTcHh/1725/

Answer 2

Попробуйте это:

$(document).ready(function(){ 
$(".fa").each(function(){ 
    if ($(this).attr('data-permission-value')) { 
    var permisssion = $(this).data("permission-value"); 
    if(permisssion) { 
    $(this).addClass("enable"); 
    } else { 
    $(this).addClass("disable"); 
    } 
    } 
}) 
$(".fa").click(function(){ 
    if ($(this).attr('data-permission-value')) { 
    var permisssion = $(this).data("permission-value"); 
    if(permisssion) { 
    $(this).data("permission-value", false); 
    $(this).addClass("disable"); 
    $(this).removeClass("enable"); 
    } else { 
    $(this).data("permission-value", true); 
    $(this).removeClass("disable"); 
    $(this).addClass("enable"); 
    } 
    } 
}); 
}); 

и CSS

i.disable { 
    color:red 
} 
i.enable { 
    color:green 
}