javascript - 如何将产品的 id 设置为他们自己的组？

Question

问题 我面临的问题是我有相同的产品但有不同的描述，所以我不得不分别将它们分组在一个下拉列表中。现在，当我更改产品下拉列表中的值时，它只会更改检索到的第一个产品中的值。问题的代码和屏幕截图附在下面。

代码

<script>
   $(document).on("change", '.tranactionID', function (event) {
           event.preventDefault();
           $('#id_price').text($(this).children(":selected").attr("price"));
           $('#id_sale_price').text($(this).children(":selected").attr("sale_price"));
           let id = $('#ItemID').find(":selected").attr('transID');
           console.log('Id : ',id)
         let Url = `{% url 'cart:cart_add' 0 %}`.replace(0,id);
         $('#transactionIDValue').attr('action', Url);
         let formAction = $('#transactionIDValue').attr('action')
         let formAction2 = $('#transactionIDValue').prop('action')
         console.log('form action relative  url : ',formAction)
         console.log('form action full url : ',formAction2)
    });
</script>

{% regroup transaction by productID as ProductList %}
  {% for productID in ProductList %}
  <div class="col-sm-3" id="productID" >
    <div class="product">
      <a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
        <span class="status" id="discount">%</span>
        <div class="overlay"></div>
      </a>
      <div class="text py-3 pb-4 px-3 text-center">
        <h3><a href="#">{{productID.grouper}}</a></h3>
        <div class="d-flex">
          <div class="pricing">
            <p class="price"><span class="mr-2 price-dc" id='id_price'>Rs. </span><span class="price-sale" id='id_sale_price'>Rs. </span></p>
          </div>
        </div>
          
          <select class="tranactionID" id="ItemID" style="width: 250px;">
            <option value="none" selected disabled hidden>
              Select an Option
          </option>
            {% for val in productID.list %}
                <option transID={{val.id}} price={{val.Price}} sale_price={{val.get_sale}} class="price_value" >{{val.AUID}} - {{val.Description}}</option>
            {% endfor %}
          </select>
         
         
        <!-- <div class="bottom-area d-flex px-3">
          <div class="m-auto d-flex"> -->
            <form id='transactionIDValue' class="d-inline" method="post">
              {{cart_product_form}}
              {% csrf_token %}
              <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
              
              
              <!-- <button type="submit" class="btn btn-primary shadow px-5 py-2">Add to Cart</button> -->
            </form>
          <!-- </div> -->
        <!-- </div> -->
      </div>
    </div>
  </div>
  {% endfor %}

输出

现在在上面附加的图像中，问题是我已经更改了橙子下拉列表中的值，但价格在洋葱处更新，甚至 id 也被传递给洋葱的添加到购物车按钮。谁能帮我解决这个问题。

标签： javascripthtmldjangodjango-viewsdjango-templates

Answer 1

您不能对多个元素使用相同ids的元素，因此将它们更改为类选择器。然后，在您的事件处理程序中使用.closest()和.find()更改所需的元素值。

演示代码：

$(document).on("change", '.tranactionID', function(event) {
  //get closest outer div.. 
  var selector = $(this).closest(".productID")
  //find to get required elements..
  selector.find('.id_price').text($(this).children(":selected").attr("price"));
  selector.find('.price-sale').text($(this).children(":selected").attr("sale_price"));
  let id = $(this).find("option:selected").attr('transID');
  let Url = `{% url 'cart:cart_add' 0 %}`.replace(0, id);
  selector.find("form").attr('action', Url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--added class-->
<div class="col-sm-3 productID">
  <div class="product">
    <a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
      <span class="status discount">%</span>
      <div class="overlay"></div>
    </a>
    <div class="text py-3 pb-4 px-3 text-center">
      <h3><a href="#">Somethings,,</a></h3>
      <div class="d-flex">
        <div class="pricing">
          <!--added class-->
          <p class="price"><span class="mr-2 price-dc id_price">Rs. </span> <span class="price-sale">Rs. </span></p>
        </div>
      </div>

      <select class="tranactionID" style="width: 250px;">
        <option value="none" selected disabled hidden>
          Select an Option
        </option>

        <option transID=1 price=234 sale_price=55 class="price_value">1 - abc</option>
        <option transID=1 price=224 sale_price=55 class="price_value">2 - abc3</option>

      </select>


      <form id='transactionIDValue' class="d-inline" method="post">

        <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
      </form>

    </div>
  </div>
</div>
<div class="col-sm-3 productID">
  <div class="product">
    <a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
      <span class="status discount">%</span>
      <div class="overlay"></div>
    </a>
    <div class="text py-3 pb-4 px-3 text-center">
      <h3><a href="#">Something</a></h3>
      <div class="d-flex">
        <div class="pricing">
          <p class="price"><span class="mr-2 price-dc id_price">Rs. </span> <span class="price-sale">Rs. </span></p>
        </div>
      </div>

      <select class="tranactionID" style="width: 250px;">
        <option value="none" selected disabled hidden>
          Select an Option
        </option>
        <option transID=2 price=234 sale_price=55 class="price_value">1 - abc</option>
        <option transID=2 price=224 sale_price=55 class="price_value">2 - abc3</option>

      </select>


      <form class="d-inline" method="post">

        <input type="submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
      </form>
    </div>
  </div>
</div>