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

我有一个简单的页面，可以切换部门的可见性，用一个漂亮的图标来显示它是否可见。 我使用的是字体令人敬畏的图标“fa eye”和“fa eye slash”

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

添加类“fa-eye”

这非常奇怪，我从未在jquery中遇到过类似的情况。请有人帮助我克服/解决这个问题

小提琴在这儿

---

谢谢

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

或切换类

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

---

我不知道为什么您的代码不起作用，但请尝试以下方法：

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

});

---

您有两个

if

条件，它们一个接一个地运行

如果第一个

If

运行，那么它所做的事情之一就是

$（elm）.addClass（'fa-eye-slash'）

第二个
if
条件是
if（$（elm）.hasClass（“fa眼斜线”）
因此，如果第一个
if
运行，那么第二个将始终运行

您需要一个
else
语句

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

您犯了错误。您必须将“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");
                }

尝试切换类而不是ifs，它似乎适合我。我想我需要更多的咖啡，一个多小时都在胡闹，却没有意识到这一点！
    $(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
    $(elm).removeClass("fa-eye-slash");

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");
                }