Question

我有一个简单的页面可以切换部门的可见性，并带有一个漂亮的图标来显示它是否可见。我正在使用font-awesomes图标＆＃34; fa-eye＆＃34;和＆＃34; fa-eye-slash＆＃34;

问题是当使用addClass时，jquery会忽略第二个＆＃34; - ＆＃34;制备

$(this).addClass("fa-eye-slash")

添加课程＆＃34; fa-eye＆＃34;。

它非常奇怪，我从来没有遇到过像jquery这样的东西。请有人协助我解决/解决这个问题。

继承人http://jsfiddle.net/m5cdpnhk/

由于

Answer 1

添加其他选项（如果没有其他情况，则问题是两个）

$(".box-body ul li i").click(function () {
    var elm = $(this);

    if ($(elm).hasClass("fa-eye")) {
          $(elm).removeClass("fa-eye"); 
          $(elm).css("color", "red");
          $(elm).addClass('fa-eye-slash');
    }else{
         //if ($(elm).hasClass("fa-eye-slash")) {
              $(elm).removeClass("fa-eye-slash");
              $(elm).addClass("fa-eye");
              $(elm).css("color", "green");
         //}
    }
});

或切换班级

.red:before{
  color:red
}
.green:before{
    color:green;
}


$(".box-body ul li i").click(function () {
   var elm = $(this);
   $(elm).toggleClass("fa-eye").toggleClass("red");
   $(elm).toggleClass("fa-eye-slash").togglesClass("green");               
});

Answer 2

您有两个if条件一个接一个地运行。

如果第一个if运行，那么它所做的一件事就是$(elm).addClass('fa-eye-slash');。

第二个if条件为if ($(elm).hasClass("fa-eye-slash"))，因此如果第一个if运行，那么第二个始终运行。

您需要else声明。

    $(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
    $(elm).removeClass("fa-eye-slash");

Answer 3

我不知道为什么你的代码不能正常工作，但试试这个：

$(".box-body ul li i").click(function () {
        var elm = $(this);

                if ($(elm).hasClass("fa-eye")) {
                    $(elm).removeClass("fa-eye"); 
                    $(elm).css("color", "red");
                    $(elm).addClass('fa-eye-slash');
                }else{
                    $(elm).removeClass("fa-eye-slash");
                    $(elm).addClass("fa-eye");
                    $(elm).css("color", "green");
                }

});

http://jsfiddle.net/m5cdpnhk/2/

Answer 4

你做错了。你必须在第二个条件下放置“else if”。

if ($(elm).hasClass("fa-eye")) {
                    $(elm).removeClass("fa-eye"); 
                    $(elm).css("color", "red");
                    $(elm).addClass('fa-eye-slash');
                }
                else if ($(elm).hasClass("fa-eye-slash")) {
                    $(elm).removeClass("fa-eye-slash");
                    $(elm).addClass("fa-eye");
                    $(elm).css("color", "green");
                }

Jquery如何添加一个包含两个破折号的类？

4 个答案: