1つのスクリプト機能を使用して複数の製品の価格を個別に変更するにはどうすればよいですか？

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 "closest（）"を使用することができます。

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

IDが "価格"の最も近いオブジェクトをフェッチし、そのHTMLコンテンツを変更します。

私はそれが役に立ちそうです。 jquery closest api docsで詳しく読むことができます。