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

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>

对于我来说，颜色和名称的相同隐藏输入名称是错误的