使用 jquery ajax 更改产品数量

Question

我有一个购物车和一个在表格中显示所有产品的页面。我可以删除产品，但我也希望能够更改它们的数量。

我的表格包含一个输入字段，您可以在其中更改数量，当单击下面的“更新”购物车按钮时，我会将产品名称和数量发送到我的 PHP 脚本。问题是，它总是发布第一个产品。

可能是因为所有的类名都相同，我该如何解决？

这是我的桌子的样子：

<div class="col-md-8">
   <div class="kl-title-block clearfix text-left tbk-symbol--line  tbk-icon-pos--after-title">
      <h2 class="tbk__title montserrat fs-34 fw-semibold black winkelmandtitle">Uw Winkelmand</h2>
      <span class="tbk__symbol ">
      <span></span>
      </span>
      <h4 class="tbk__subtitle fs-22 fw-thin">Bent u niets vergeten?</h4>
   </div>
   <div class="table-responsive">
      <table class="table carttable">
         <thead>
            <tr>
               <th>Verwijder</th>
               <th>Afbeelding</th>
               <th>Product</th>
               <th>Prijs</th>
               <th>Aantal</th>
               <th>Totaal</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 13" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad-13" class="product-title">
                  <img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 13" title="Bad 13">
                  </a>
               </td>
               <td>
                  <a href="baden/bad-13" class="product-title">
                  Bad 13
                  </a>
               </td>
               <td>€ 1500</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 13" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 1500</td>
            </tr>
         </tbody>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 14" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad-14" class="product-title">
                  <img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 14" title="Bad 14">
                  </a>
               </td>
               <td>
                  <a href="baden/bad-14" class="product-title">
                  Bad 14
                  </a>
               </td>
               <td>€ 800</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 14" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 800</td>
            </tr>
         </tbody>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 1" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad1" class="product-title">
                  <img class="attachment-shop_thumbnail" src="cms/images/bad.jpg" alt="Bad 1" title="Bad 1">
                  </a>
               </td>
               <td>
                  <a href="baden/bad1" class="product-title">
                  Bad 1
                  </a>
               </td>
               <td>€ 1000</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 1" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 1000</td>
            </tr>
         </tbody>
      </table>
      <input type="submit" class="button updatebutton" name="update_cart" value="Wijzig winkelmand">
   </div>
</div>

这是我的触发 ajax 帖子的 jquery 脚本。

//Wijzig winkelmand met het aantal producten
tpj('.cartsection').on('click', '.updatebutton', function(event) {
  var $edit = tpj('.quantityclass').attr('id'),
  $aantal = tpj('.quantity').find( "input[name='quantity']" ).val(),
  url = 'includes/cartoverzicht.php';

  var posting = tpj.post( url, { edit: $edit, aantal: $aantal} );

  posting.done(function( data ) {
    var content = tpj( data );
    tpj( "#cartresult" ).empty().append( content );
  });
});

问题是，当我在网络中查看时，无论我点击什么产品，它总是发布：

edit:Bad 13
aantal:1

我该如何解决这个问题？

我可以将所有数量发布到我的 php 脚本吗？最好的解决方案是什么？

Answer 1

问题就在这里：

var $edit = tpj('.quantityclass').attr('id'),

您正在使用类选择器来获取值，它总是返回第一个元素值。而是使用this

看这个例子：

$(document).ready(function(){
  $('.list').click(function(){
    console.log( $('.list').html() );
  });

  $('.listing').click(function(){
    console.log( $(this).html() );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
First list (It always return the first element value)
</p>
<li class="list">One</li>
<li class="list">Two</li>
<li class="list">Three</li>

<p>
Another List (It always return the clicked element value)
</p>

<li class="listing">One</li>
<li class="listing">Two</li>
<li class="listing">Three</li>

Answer 2

您遇到了问题，因为您只抓住了第一个选择器。您还将 API 设计为仅在您想要发送整个更新集时发送一个更新。

如果您想更新整个购物车的数量，可以使用以下方法。

$('.updatebutton').on('click', function(event) {
    var elements = $('.quantity input[name="quantity"]'),
        url = 'includes/cartoverzicht.php',
        postBody = [];
    for (var i=0; i<elements.length; i++) {
        var element = $(elements[i]);
        postBody.push({
            edit: element.attr('id'),
            aantal: element.val()
        })
    }
    var posting = $.post( url, JSON.stringify(postBody) );
    posting.done(function( data ) {
        var content = $( data );
        $( "#cartresult" ).empty().append( content );
    });
});