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>

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

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

Answer 1

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

.redIcon{
    color: red;

}
.greenIcon{
    color:green;
}

创建了一个单击函数来演示数据权限的值更改。因为你不想改变所有字体真棒图标，所以添加另一个类，比如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
}

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

2 个答案: