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 liberary。因为最初在javascript $中只是$意味着jquery告诉浏览器它是一个jquery函数。

在您的网页中加入此jquery liberary。

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

Answer 3

MMh尝试在标记之前加入jquery

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

Answer 4

在JS代码之前添加jQuery脚本

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

定义变量“$”。您可以通过在JS代码中添加包装器来实现此目的：
```
<script>
    (function($){
        // your code here
    })(jQuery)
</script>
```

未捕获的ReferenceError：$未定义

4 个答案: