Question

请查看我的代码here。该页面已部署here。

我使用ID price来指代商品的价格。一般的jQuery函数试图改变选择更改中每个项目的价格（相对于项目的大小），如下所示：

jQuery(document).ready(function(){
        jQuery(".variation_select").change(function(){
          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("<h4>" + "₹&nbsp;" + sale_price + " <small class='og-price'>" + "₹&nbsp;" + price + "</small></h4>");
          } else {
            $("#price").html("₹&nbsp;" + price);
          }
        });
    });

由于项目及其数据来自后端并且我有多个项目，因此HTML可以理解地复制，因此，我有多个具有相同ID的元素。显示商品价格的HTML如下：

<div class="row">
{% for object in object_list %}
  <div class="col-sm-6 col-md-4">
    {% if object.productimage_set.count > 0 %}

    {% for img in object.productimage_set.all %}
    <div class="thumbnail">
      <img class='img-responsive' src="{{ img.image.url }}" >


    {% endfor %} 

    {% endif %}



      <div class="caption">
        <h3 style="text-align: center;">{{ object.title }}</h3>

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



    {% if object.variation_set.count > 1 %}
        <h4 id='price' style="text-align: center; display: block;">₹&nbsp;{{ object.variation_set.first.price }}</h4>

        <select name= 'item' class='form-control variation_select' style="margin: 0 auto; width: 30%; display: block;">
                {% for vari_obj in object.variation_set.all %}
                    <option data-sale-price="{{vari_obj.sale_price}}" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option>
                {% endfor %}
                </select>
        <br>


        {% else %}



        <input type="hidden" name='item' value='{{ object.variation_set.first.id }}' />
                    <h4 id="price" style="text-align: center; display: block;">₹&nbsp;{% if object.variation_set.first.sale_price %}

                    {{ object.variation_set.first.sale_price }}
                        &nbsp;<small style="text-align: center; display: inline-block" class="og-price">₹</small>
                    <small class="og-price">{{ object.variation_set.first.price }}</small>

                    {% else %}



                    {{ object.variation_set.first.price }}

                    {% endif %}

                </h4>




        {% endif %}

        <p style="text-align: center;">{{object.description}}</p>
        <br>
        <input class='form-control' type='number' name='qty' value='1'  style="text-align: center; margin: 0 auto; width: 30%; display: block;" /> 
        <br>
        <p><input id='submit-btn' type='submit'  value='Add to Cart' class="btn btn-primary"  style="text-align: center; margin: 0 auto; padding: 5% 10%; display: block;" />


        </p>
        </form>

      </div>
    </div>
  </div>
  {% endfor %}
</div>

据我所知，只有第一项的价格会发生变化，因为它的第一个代码块带有一个唯一的ID实例，其余所有内容都违反了具有唯一ID的规则。因此他们的价格不会改变。虽然把它们放在同一个班级会改变它们的价格，但我不想要其他的东西。如何解决在我的页面中有多个项目并且仍然可以单独选择其价格的问题？

Answer 1

在你改变的函数上，你可以使用jquery“nearest（）”，就像这样。

$(this).closest("#price").html("₹&nbsp;" + price);

它将获取ID为“price”的最近对象并更改其html内容。

我希望它有所帮助。您可以在jquery closest api docs上阅读更多内容。

如何使用单个脚本功能单独更改多个产品的价格？

1 个答案: