JQuery addClass 不工作

Question

我有一个显示和隐藏 div 的代码，当 div 打开或关闭时，不透明度和颜色会发生变化。我不想使用 JQuery .css() 将 CSS 直接添加到元素，而是想使用 addClass，但我不明白为什么下面的代码不起作用。

当我运行构建时，我收到消息'ReferenceError: $ is not defined'。我也不确定那是什么意思。请帮忙。

JQuery

$(document).ready(function() {
    $(".upload-panel-container").click(function(e) {
        $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear");
        if ($(".upload-menu-container").hasClass("open")) {
            $(".upload-panel-container").addClass("setOpacityto1");
        } else {
            $(".upload-panel-container").addClass("setOpacityto85");
        }
    });

});

CSS

.setopacityto1 {
    opacity: 1;
    color: red;
}

.setopacityto85{
    opacity: .85;
    color: blue;
}

Answer 1

“$ is not defined”通常意味着 jQuery 没有正确加载到您的页面。所以 $(jQuery 语法)不被识别

更新:我修复了它。您的类名区分大小写，请确保您在 CSS 和 JS 中使用相同的名称。您不仅需要在需要更改的地方添加类，还需要删除它们；否则每次单击时，都会再次添加该类，最终会将两个类都添加到元素中。 (检查元素以了解我的意思。)

$(document).ready(function() {
    $(".upload-panel-container").click(function() {
        $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear");
        if ($(".upload-menu-container").hasClass("open")) {
            $(".upload-panel-container").addClass("setopacityto1");
            $(".upload-panel-container").removeClass("setopacityto85");
        } else {
            $(".upload-panel-container").addClass("setopacityto85");
            $(".upload-panel-container").removeClass("setopacityto1");
        }
    });

});