0

我试图迭代这个过程..使用 jquery (each();) 中的 for-loop 方法，但我不能让它发生。知道如何在每次添加更多 carItems 而无需手动操作时创建更多“行”吗？谢谢！

   <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>  </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <table id="cart">
            <thead>
              <tr>
                <th>Name</th>
                <th>Qty.</th>
                <th>Total</th>
              </tr>
            </thead>
            <tr class="template" style="display:none;">
              <td><span class="item_name">Name</span></td>
              <td><span class="item_qty">Quantity</span></td>
              <td><span class="item_total">Total</span>.00</td>
            </tr>
          </table>
    </body>

    </html>

    function template(row, cart) {
      row.find('.item_name').text(cart.name);
      row.find('.item_qty').text(cart.qty);
      row.find('.item_total').text(cart.total);
      return row;
    }

    $(document).ready(function(){
      var newRow = $('#cart .template').clone().removeClass('template');
        var newRow_1 = $('#cart .template').clone().removeClass('template');



      var cartItem = 
      {
        name: 'Glendatronix',
        qty: 1,
        total: 450
      };

       var cartItem_1 = {
        name: 'Glendatronix',
        qty: 1,
        total: 450
      };


      template(newRow, cartItem)
        .appendTo('#cart')
        .fadeIn(); 

          template(newRow_1, cartItem_1)
        .appendTo('#cart')
        .fadeIn();   
    });
4

4 回答 4

1 
var tmpl = $('#cart .template').clone();    

var template = function(cart) {
    var html = tmpl;
    html.find('.item_name').text(cart.name);
    html.find('.item_qty').text(cart.qty);
    html.find('.item_total').text(cart.total);
    return html.html();
}


var cart = [
{
  name: 'Glendatronix 1',
  qty: 1,
  total: 450
},{
  name: 'Glendatronix 2',
  qty: 1,
  total: 450
}];


$.each(cart, function(item) {
   $('#cart').append('<tr>' + template(cart[item]) + '</tr>' );
});

所以基本上，将您的购物车摘要放在一个数组中。遍历这个数组，获取基本模板并用数据修改它。但是在我上一条评论中用模板应该如何工作来改变它，我不喜欢我添加的技巧:-)

于 2012-09-27T20:25:20.357 回答
1

您也可以在此处尝试此解决方案。它还使用来自 jquery 的克隆并附加该项目。

http://jsfiddle.net/L89kw/5

顺便说一句：在将元素附加到表后.fadeIn()添加（我animate({opacity: 1})在示例中使用）很重要。没有阅读文档，但我认为 append 不会返回新元素（至少在 jquery 1.7.2 中没有）

于 2012-09-27T20:40:27.247 回答
0 
var cartItems = 
[
    {
        name: 'Glendatronix',
        qty: 1,
        total: 450
    },
    {
        name: 'Glenda',
        qty: 2,
        total: 451
    }
];

$(function(){

     $.each(cartItems, function(){

         var $tr = $('<tr/>')
             .html('<td>' +  this.name + '</td>'); //add names, quantity etc here...
             .appendTo('#cart');

     });
});
于 2012-09-27T20:29:05.697 回答
0

克隆很好，但你可以采取下一步并使用类似车把的东西http://handlebarsjs.com/我有很好的经验

另一个替代 JQUERY 模板插件http://api.jquery.com/category/plugins/templates/

或者对你的代码有更大影响的 knockout.js 作为一个更广泛的框架。

于 2012-09-27T20:19:27.393 回答