Django javascript 文件未加载

Question

我正在尝试将 javascript 文件 (script.js) 添加到我现有的 static 目录中。 我已将script.js存储在与main.css相同的目录下（工作正常）

我想突出显示选定的无线电图像，如下所示： https://jsfiddle.net/dom_sniezka/78dy3to2/46/

我不明白为什么它在我的 Django 项目中不起作用。

底座.html

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{% static 'app_pickfeel/main.css'%}">
    <script src="{% static 'app_pickfeel/script.js' %}"></script>

  </head>

脚本.js

jQuery(function ($) {
        // init the state from the input

        // sync the state to the input
        $(".image-radio").on("click", function (e) {
                $(".image-radio-checked").each(function(i){
                    $(this).removeClass("image-radio-checked");
            });
                        $(this).toggleClass("image-radio-checked");
            e.preventDefault();

        });
    });

主.css

/*Changes Opacity when user hovers over image*/
.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

.image-radio {
  cursor:pointer;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:4px solid transparent;
  outline:0;
}

.image-radio input[type="radio"] {
  display:none;
}

.image-radio-checked {
  border: 4px solid #f58723;
}

Answer 1

您忘记加载script.js使用的 jQuery。 这就是script.js不起作用的原因。

如果您下载了 jQuery 的副本，只需将其包含在script.js之前。 例如：

<head>
    <!-- ... -->

    <script src="{% static 'app_pickfeel/jquery.js' %}"></script>
    <script src="{% static 'app_pickfeel/script.js' %}"></script>
</head>

或者，如果您更喜欢使用由其他人（例如 Google）托管的 jQuery 的副本：

<head>
    <!-- ... -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="{% static 'app_pickfeel/script.js' %}"></script>
</head>

Django javascript 文件未加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-01 13:10:00

Django javascript 文件未加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-01 13:10:00

解决方案1
1 已采纳 2020-05-01 13:10:00