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

Question

我有一个简单的页面，可以切换部门的可见性，并带有一个漂亮的图标来显示它是否可见。我正在使用超棒的字体图标 "fa-eye" 和 "fa-eye-slash"

问题是在使用 addClass jquery 时忽略了第二个“-” making

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

添加 class "fa-eye".

这很奇怪，我从来没有遇到过 jquery 这样的事情。请有人帮助我如何 overcome/work 解决这个问题。

这里是fiddlehttp://jsfiddle.net/m5cdpnhk/

谢谢

Answer 1

添加一个else选项（问题是在这种情况下没有else的两个if）

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

或切换 class

.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

我不知道为什么你的代码不起作用，但试试这个：

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

你有两个 if 条件，一个接一个运行。

如果第一个 if 运行s，那么它做的事情之一就是 $(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 4

您已完成 mistake.you 必须将 "else if" 放在第二个 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 如何添加包含两个破折号的 class？

Jquery how to add a class containing two dashes?

javascript

jquery

font-awesome