未知の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

---

1. を変数 "$" を定義するあなたのJSコードの前に

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

2. をjQueryのスクリプトを追加。

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

Answer 2

MMHは、あなたがあなたのページにjQueryのを使用している場合は、あなたのHTMLページにjqueryのliberaryを含める必要があり、あなたのタグの前にjQueryを含む

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

Answer 3

を試してみてください。最初はjavascript $にあるので、$は、ブラウザにjquery関数を知らせるjqueryを意味します。

あなたのウェブページにこのjquery liberaryを含めてください。 jqueryのスクリプトを使用した後

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

Answer 4

、代わりにこのコードを使用します。

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