Question

我需要将simpleCart中的项目添加到表单中。我找不到任何可以执行此操作的内置函数，因此我正在尝试创建自己的脚本。

在结帐页面上，simpleCart会添加如下项目：

<div class="simpleCart_items">
  <table>
    <thead>
      <tr class="headerRow">
        <th class="item-name">Name</th>
        <th class="item-price">Price</th>
        <th class="item-size">Size</th>
        <th class="item-color">Color</th>
        <th class="item-decrement"></th>
        <th class="item-quantity">Qty</th>
        <th class="item-increment"></th>
        <th class="item-total">SubTotal</th>
        <th class="item-remove"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="itemRow row-0 odd" id="cartItem_SCI-1">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Small</td>
        <td class="item-color">Blue</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">2</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿800.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
      <tr class="itemRow row-1 even" id="cartItem_SCI-2">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Medium</td>
        <td class="item-color">Clay</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">1</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿400.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
    </tbody>
  </table>
</div>

在同一个结帐页面上，我有一个表单，客户会在其中添加他们的姓名，邮寄地址等。我想将上面的每个项目添加为表单的输入，如下所示：

<input type="hidden" name="Item 1" value="Deer Shirt">
...

似乎使用jQuery的.each会起作用，但它没有产生预期的结果。

这就是我现在所拥有的：

simpleCart.ready(function() {

  $('.itemRow').each(function(){
    $('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-name').text() + '">');
    $('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-color').text() + '">');
  });

});

预期产出：

<input type="hidden" name="cartItem_SCI-1" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="Blue">
<input type="hidden" name="cartItem_SCI-2" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-2" value="Clay">

实际输出：

<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">

也许.each不是最好的方法。关于如何获得预期产出的任何想法？

Answer 1

第一个错误就在这里

$('.itemRow').each(function(){
    $('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-name').text() + '">');
    $('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-color').text() + '">');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simpleCart_items">
  <table>
    <thead>
      <tr class="headerRow">
        <th class="item-name">Name</th>
        <th class="item-price">Price</th>
        <th class="item-size">Size</th>
        <th class="item-color">Color</th>
        <th class="item-decrement"></th>
        <th class="item-quantity">Qty</th>
        <th class="item-increment"></th>
        <th class="item-total">SubTotal</th>
        <th class="item-remove"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="itemRow row-0 odd" id="cartItem_SCI-1">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Small</td>
        <td class="item-color">Blue</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">2</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿800.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
      <tr class="itemRow row-1 even" id="cartItem_SCI-2">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Medium</td>
        <td class="item-color">Clay</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">1</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿400.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
    </tbody>
  </table>
</div>
<form></form>

至于我，颜色和名称的隐藏输入名称是错误

Answer 2

按照我问原问题的方式，上面的Pavlo答案是正确的，但由于xDreamCoding的评论，我做了一些挖掘，发现simpleCart有自己的.each运算符。最后，我能够得到我需要的东西：

  simpleCart.each(function( item , x ){
    $('form').append('<input type="hidden" name="' + item.get('id') + ' Name" value="' + item.get('name') + '">');
    $('form').append('<input type="hidden" name="' + item.get('id') + ' Color" value="' + item.get('color') + '">');
  });

将simpleCart项添加到表单作为输入值

2 个答案: