未捕获的 ReferenceError: $ 未定义

Question

我知道有很多带有相同标签的问题。但我尝试了一些解决方案，但没有奏效。以下是我的代码，我不知道如何修复它。

<script>
function setPrice(){
    var price = $(".variation_select option:selected").attr("data-price")
    var sale_price = $(".variation_select option:selected").attr("data-sale-price")
    if (sale_price != "" && sale_price != "None" && sale_price != null ) {
    $("#price").html("<h3>" + sale_price + " <small class='og-price'>" + price  + "</small></h3>");
    } else {
    $("#price").html(price);
    }
}
setPrice()

$(".variation_select").change(function(){
    setPrice()

})

$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
    $.ajax({
        type:'GET',
        url: "{% url 'cart' %}",
        data: formData,
        success: function(data){
            console.log(data)
        },
        error: function(response, error){
            console.log(response)
            console.log(error)
        }
    })

    // $("#add-form").submit()
})

</script>

它在浏览器检查元素上显示的错误位于

var price = $(".variation_select option:selected").attr("data-price")

尽管我认为没有必要，但以下是 HTML 代码：

<div class='col-sm-4'>

<form id='add-form' method='GET' action="{% url 'cart' %}">
<p id='jquery-message' class='lead'>

</p>
    {% if object.variation_set.count > 1 %}
    <h3 id='price'>{{ object.variation_set.first.price }}</h3>

        <select name='item' class='form-control variation_select'>
        {% for vari_obj in object.variation_set.all %}
        <!-- <option data-img="http://www.spirit1059.com/pics/Feeds/Articles/2015611/118317/Beach.jpg" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option> -->
        <option  data-sale-price="{{ vari_obj.sale_price }}" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option>
        {% endfor %}
        </select>

    {% else %}
            <input type="hidden" name='item' value='{{ object.variation_set.first.id }}' />
            <h3 id='price'>{% if object.variation_set.first.sale_price %}
            {{ object.variation_set.first.sale_price  }}
            <small class='og-price'>{{ object.variation_set.first.price }}</small>
            {% else %}
            {{ object.variation_set.first.price }}
            {% endif %}
        </h3>


    {% endif %}
    <br/>
    <input class='form-control' type='number' name='qty' value='1' />
<br/>
<input id='submit-btn' type='submit' value='Add to Cart' class='btn btn-default' />
</form>

Jquery 脚本文件包括以下内容：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>

如果您不熟悉 Django 模板语言，请忽略它。您仍然可以对跳过模板语言的 jQuery 错误有所了解。

Answer 1

使用 jquery 脚本后，改用此代码：

$(document).ready(function(){
     setPrice()
     $(".variation_select").change(function(){
         setPrice()
     })
});

Answer 2

如果您在页面中使用 jQuery，则需要在 html 页面中包含一个 jquery 库。因为最初在 javascript 中 $ 只不过是 $ 表示 jquery，它告诉浏览器它是一个 jquery 函数。

在您的网页中包含这个 jquery 库。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Answer 3

---

1. 在你的 JS 代码之前添加 jQuery 脚本

   <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
   

2. 定义变量“$”。您可以通过在 JS 代码中添加包装器来实现：

   <script>
       (function($){
           // your code here
       })(jQuery)
   </script>
   

Answer 4

MMh 尝试在您的标签前包含 jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>