将 JS 变量传递给另一个 JS 和 django 视图

问题描述 投票：0回答：1

我有几张带有物品的卡片。 我为每张卡添加了一个计数器和一个“添加到购物车”按钮。 我想使用 ajax 将项目计数传递到 django 视图中。 但我不知道如何为每张卡将变量从计数器传递到 ajax 函数。 当前版本无法正常工作，因为每次 count = 1。

var globalVariable;
var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");
var incrementPlus = buttonPlus.click(function() {
  var $n = $(this)
  .parent(".col")
  .find(".input-qty");
  $n.val(Number($n.val()) + 1);
  globalVariable = $(this).$n.val();
});

var incrementMinus = buttonMinus.click(function() {
  var $n = $(this)
  .parent(".col")
  .find(".input-qty");
  var amount = Number($n.val());
  1
  if (amount > 0) {
    $n.val(amount - 1);
    globalVariable = $(this).$n.val();
  }
});

$(document).ready(function() {
  $(".send-quantity").click(function() {
    var quantity = globalVariable;

    if (quantity === undefined) {
      quantity = 1;
    }
    var id = $(this).data("id");
    $.ajax({
      url: "{% url 'stripe_order:cart_add' %}",
      data: {
        'id': id,
        'quantity': quantity,
      },
    });
  });
});

我的 HTML：

{% for item in items %}
      <div class="col">
        <div class="card mb-4 rounded-4 shadow-sm">
          <div class="card-header py-3">
            <h3 class="my-0 fw-normal">{{ item.name }}</h3>
          </div>
          <div class="card-body">
            <h4 class="card-title pricing-card-title ">${{ item.price }}</h4>
            <ul class="list-unstyled mt-3 mb-4">
              <li>{{ item.description }}</li>
            </ul>
              <div class="row">
                <div class="col">
                  <div class="col input-group input-group-sm mb-3">
                      <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
                      <input type="text" name="qty" value="1" class="input-qty form-control">
                      <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
                  <div class="col">
            <a data-id="{{ item.id}}" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
         </div>
          </div>
              </div>
        </div>
      </div>
    {% endfor %}

谢谢！

javascript python jquery django ajax
1个回答
0
投票

要获取数量，您只需使用 

closest('.card-body').find(".input-qty").val()
即可返回单击 
Add to Cart
时的当前计数。另外，您不需要 
globalVariable
，因为计数值将被动态获取。

演示代码：

var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");
buttonPlus.click(function() {
  var $n = $(this)
    .parent(".col")
    .find(".input-qty");
  $n.val(Number($n.val()) + 1);
});

buttonMinus.click(function() {
  var $n = $(this)
    .parent(".col")
    .find(".input-qty");
  var amount = Number($n.val());
  1
  if (amount > 0) {
    $n.val(amount - 1);
  }
});

$(document).ready(function() {
  $(".send-quantity").click(function() {

    var quantity = $(this).closest('.card-body').find(".input-qty").val(); //get quantity

    if (quantity === undefined) {
      quantity = 1;
    }
    var id = $(this).data("id");
    console.log('id - ' + id + ' | count - ' + quantity);
    //ajax call--
  });
});
.send-quantity {
  color: green
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$20</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</li>
      </ul>
      <div class="row">
        <div class="col">
          <div class="col input-group input-group-sm mb-3">
            <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
            <input type="text" name="qty" value="1" class="input-qty form-control">
            <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
          </div>
        </div>
        <div class="col">
          <a data-id="1" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ 2</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$22</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</li>
      </ul>
      <div class="row">
        <div class="col">
          <div class="col input-group input-group-sm mb-3">
            <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
            <input type="text" name="qty" value="1" class="input-qty form-control">
            <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
          </div>
        </div>
        <div class="col">
          <a data-id="2" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ 3</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$25</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</li>
      </ul>
      <div class="row">
        <div class="col">
          <div class="col input-group input-group-sm mb-3">
            <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
            <input type="text" name="qty" value="1" class="input-qty form-control">
            <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
          </div>
        </div>
        <div class="col">
          <a data-id="3" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.