切换图标颜色和更改属性？

Question

我正在使用这样的字体图标

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

我需要在页面加载到所有具有 data-permission-value = false 的图标为红色，其他为绿色，但当用户切换该图标以更改值时为 true 并将颜色更改为绿色。当用户再次单击图标以将该值恢复为 false 并将颜色更改为红色时？

这是工作小提琴 http://jsfiddle.net/DTcHh/1714/

Answer 1

您可以在字体真棒图标中使用自己的类。 所以只需创建这两个 css 类：

.redIcon{
    color: red;

}
.greenIcon{
    color:green;
}

创建了一个click函数来演示data-permission的值变化。由于您不想更改所有字体真棒图标，请添加另一个类，例如 toggableIcon 到那些应该是可切换的......

$(".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
}