我在django中的Javascript只工作一次

Question

我在Django中创建了一个在线披萨订购网站。 当用户订购比萨饼时，比萨饼的价格会根据该比萨饼的所选尺寸来更改，为此，我会使用JavaScript显示所选尺寸的价格并隐藏其余的价格。 即时通讯使用JavaScript来显示选定的比萨饼价格块并隐藏其他，但是问题是当我尝试在第二个div中更改比萨的大小时，javascript仅在第一个div上起作用，它什么也没做。

 function selectFunction() { var size = document.getElementById("select"); var option = size.options[size.selectedIndex].text; if(option=="Select Size"){ document.getElementById("price").innerHTML = "Rs."; } if(option=="Large"){ x = document.getElementById("l-price"); x.style.display = "block"; y = document.getElementById("m-price"); z = document.getElementById("s-price"); y.style.display = "none"; z.style.display = "none"; } if(option=="Medium"){ x = document.getElementById("m-price"); x.style.display = "block"; y = document.getElementById("l-price"); z = document.getElementById("s-price"); y.style.display = "none"; z.style.display = "none"; } if(option=="Regular"){ x = document.getElementById("s-price"); x.style.display = "block"; y = document.getElementById("m-price"); z = document.getElementById("l-price"); y.style.display = "none"; z.style.display = "none"; } } 

 {% extends "pizza_app/base.html" %} {% load static %} {% block content %} <div class="md-padding" style="width:92%; margin-left:auto; margin-right:auto;"> <form method="post"> <div class="row"> <div class="section-header text-center" > <h2 style="color:rgba(255, 255, 255, .9);">Pizza Menu</h2> </div> {% for pizza in pizzamenu %} <div class="col-md-6 col-sm-12 col-xs-12 pizza-menu"> <div class="col-md-4 col-sm-12 col-xs-12 text-center" style="min-width:150px; padding: 0;"> <div class="menuimg "> <img class="img-responsive" src="{{pizza.image.url}}"> </div> </div> <div style="padding: 0;" class="col-md-offset-0 col-md-8 col-sm-offset-0 col-sm-12 col-xs-12 padding945"> <div class="menu"> <h4>{{pizza.name}}</h4> <span style="padding:0px; margin:0px;"> <img src="" style="width:130px; margin:0px; margin-top:-35px;"> <p id="menup">{{pizza.detail}}</p> </span> </div> <div class="col-md-12 col-sm-12 col-xs-12 dsize"> <div class="form-control "> <select class="select-style" id="select" onchange="selectFunction()"> <option value="" selected disabled hidden>Select Size</option> <option value="{{pizza.s_price}}"> Regular</option> <option value="{{pizza.m_price}}"> Medium </option> <option value="{{pizza.l_price}}"> Large</option> </select> </div> </div> <div class="col-md-12 col-sm-7 col-xs-6 " > <h2 style="margin-top:10px;" id="s-price" class="price-position" >Rs.{{pizza.s_price}}</h2> <h2 style="margin-top:10px;" id="m-price" class="price-position" >Rs.{{pizza.m_price}}</h2> <h2 style="margin-top:10px;" id="l-price" class="price-position" >Rs.{{pizza.l_price}}</h2> </div> <div class=" text-center col-md-12 col-sm-6 col-xs-1 add-to-cart"> <a class="add-to-cart" href="#" onclick="sizeCheck()">Add to cart</a> </div> </div> </div> {% endfor %} </div> </form> </div> {% endblock content %} 

Answer 1

id在文档中必须是唯一的； 一个id不能引用多个元素。

我建议使用类，并为pizza-menu元素具有唯一的ID，让您通过例如document.querySelector('#pizza-123 .l-price')引用价格元素。

{% for pizza in pizzamenu %}
<div class="..." id="pizza-{{ pizza.id }}">
   <select onchange="selectFunction(this, '{{ pizza.id }}')">
        <option value="" selected disabled hidden>Select Size</option>
        <option value="{{pizza.s_price}}"> Regular</option>
        <option value="{{pizza.m_price}}"> Medium </option>
        <option value="{{pizza.l_price}}"> Large</option>
    </select>
    <h2 class="s-price">Rs.{{pizza.s_price}}</h2>
    <h2 class="m-price">Rs.{{pizza.m_price}}</h2>
    <h2 class="l-price">Rs.{{pizza.l_price}}</h2>
</div>
{% endfor %}

和

function selectFunction(select, pizzaId) {
  var option = select.options[select.selectedIndex].text;
  var pizzaBlock = document.querySelector('.pizza-' + pizzaId);
  var lPrice = pizzaBlock.querySelector(".l-price");
  var mPrice = pizzaBlock.querySelector(".l-price");
  var sPrice = pizzaBlock.querySelector(".l-price");

  lPrice.style.display = (option === "Large" ? "block" : "none");
  mPrice.style.display = (option === "Medium" ? "block" : "none");
  sPrice.style.display = (option === "Small" ? "block" : "none");
}