將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>

至於顏色和名字我一樣隱藏輸入的名字是錯誤

Answer 2

上述帕夫洛的答案是每我問的方式正確原來的問題，但由於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') + '">'); 
    });