如何使用单个脚本函数单独更改多个产品的价格？答案

【问题标题】：How to change price for several products individually using a single script function?如何使用单个脚本函数单独更改多个产品的价格？
【发布时间】：2017-08-12 20:04:05
【问题描述】：

请看我的代码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 的规则。因此它们的价格不会改变。虽然将它们放在同一个班级会改变他们的价格，但我也不想要其他东西。如何解决我的页面中有多个商品但仍然可以单独选择价格的问题？

【问题讨论】：

我不明白为什么它们来自后端的事实“可以理解”意味着它们共享相同的 ID。为什么不能给他们不同的ID？请注意，您并没有显示循环的位置，这样更容易回答。
1) 因为我使用通用代码（上面的sn-p no.2）来生成object_list中所有几个对象/项目的标记，所以我不能给他们不同的ID .我只是创建了一个单一版本的代码，它根据需要获取的项目/对象的数量生成多个自身实例。如果你看一下代码，你就会明白。 2）注意点，很快就会更新sn-p。
但是“不能给他们不同的ID”根本不遵循“使用通用代码”。您拥有该对象，您可以生成一个任意唯一的 ID：例如 <h4 id='{{ object.id }}-price'>。
这是有道理的。谢谢你让我沿着这些思路转移。

标签： javascript jquery python css django

【解决方案1】：

在你改变的函数上，你可以像这样使用jquery“closest()”。

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

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

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

【讨论】：