Question

我已经获得了这个css，我需要整合我的代码。

<div class="orders-details-wrap">
                <h4>Order Summary</h4>
                <div class="orders-row">
                    <aside class="left-order">
                    <i>Vendor 1 <span>2 items</span></i>
                    </aside>
                    <aside class="right-order">
                    <i>Rs: <span>245.00</span></i>
                    </aside>
                </div>

                <div class="order-listdetails-wrap">
                    <div class="orderTitle">Popcorn - 250g</div>
                    <div class="orderCont">
                        <div class="img"><img src="images/img_popcorn.jpg"/></div>
                    </div>
                </div>

                <div class="order-listdetails-wrap">
                    <div class="orderTitle">Triple Chocolate Ice Cream</div>
                    <div class="orderCont">
                        <div class="img"><img src="images/TripleChoc.jpg"/></div>
                    </div>
                </div>

                <section class="cartTable">
                    <table width="50%" border="0" cellspacing="0" cellpadding="0" class="totalWrap" align="right">
                      <tbody>
                            <tr>
                            <td align="right" valign="middle" width="50%">Services Charges</td>
                            <td align="right" valign="middle" width="50%">Rs. 25.00</td>
                          </tr>
                          <tr style="border:none;">
                            <td align="right" valign="middle" class="total">Total</td>
                            <td align="right" valign="middle" class="total">Rs. 270.00</td>
                          </tr>
                      </tbody>
                    </table>
                    <br><br><br>
                </section>

                <div class="btns-wrap">
                    <a href="#" class="btn btn-success">Confirm Order</a>
                    <a href="#" class="btn btn-mrn">Edit Order</a>
                </div>
            </div>

为了将其与动态值相结合，我按照这种方式

我的HTML代码中包含此代码：

 <div class="orders-details-wrap" style="display:none">
 </div>

点击确认订单按钮，我正在创建此JSON。

$(document).on("click", ".btn-confirmorder", function () {

var divdata = {
    "data": [
        {
            "name": "Plain salted",
            "image": "http://hostip:8080/OrderSnacks/JSON_images/popcorn.jpg",
            "quantity": "1",
            "price": "50"
        },
        {
            "name": "Regular Cone, Single Scoop, Vanila ",
            "image": "http://hostip:8080/OrderSnacks/JSON_images/icecream_cup_vanilla.jpg",
            "quantity": "1",
            "price": "75"
        }
    ]
};

var html = $('<h4>Order Summary</h4>');
  html.append('<div class="orders-row">
  <aside class="left-order">
  <i>Vendor 1 <span>'+divdata.data.length+' items</span>
  </i></aside><aside class="right-order">
  <i>Rs: <span>245.00</span></i>
  </aside>
  </div>');

for (var i = 1; i < divdata.data.length; i++) {
 var itemname = divdata.data[i].name;
var image = divdata.data[i].image;
 var itemhtml = '<div class="order-listdetails-wrap">
                    <div class="orderTitle">Popcorn - 250g</div>
                    <div class="orderCont">
                   <div class="img"><img src="images/img_popcorn.jpg"/></div>
                   </div>
                   </div>'
} // for loop ends here 

html.append(itemhtml);

var content = '  <section class="cartTable">
                    <table width="50%" border="0" cellspacing="0" cellpadding="0" class="totalWrap" align="right">
                      <tbody>
                            <tr>
                            <td align="right" valign="middle" width="50%">Services Charges</td>
                            <td align="right" valign="middle" width="50%">Rs. 25.00</td>
                          </tr>
                          <tr style="border:none;">
                            <td align="right" valign="middle" class="total">Total</td>
                            <td align="right" valign="middle" class="total">Rs. 270.00</td>
                          </tr>
                      </tbody>
                    </table>
                    <br><br><br>
                </section>

                <div class="btns-wrap">
                    <a href="#" class="btn btn-success">Confirm Order</a>
                    <a href="#" class="btn btn-mrn">Edit Order</a>
                </div>';

html.append(content);

$('.orders-details-wrap').append(html);
$('.orders-details-wrap').show();

});

当我运行此代码时，只有一个项目被添加到div中，如果需要在我的代码中更改任何内容，请告诉我

Answer 1

看起来你正在循环外做你的追加，所以它只会追加一次。如果你把你的追加放在你的循环中，它会将你的html追加到你的循环长度。试试这个：

for (var i = 1; i < divdata.data.length; i++) {
     var itemname = divdata.data[i].name;
     var image = divdata.data[i].image;
     var itemhtml = '<div class="order-listdetails-wrap">
                       <div class="orderTitle">Popcorn - 250g</div>
                       <div class="orderCont">
                       <div class="img"><img src="images/img_popcorn.jpg"/></div>
                       </div>
                       </div>'
     html.append(itemhtml);
    } // for loop ends here

Answer 2

itemhtml的值会被循环的每次迭代覆盖，并且一个项目难以编码。您可以在循环中创建变量itemname和image但您永远不会使用它们。更改for循环：

for (var i = 1; i < divdata.data.length; i++) {
    var itemname = divdata.data[i].name;
    var image = divdata.data[i].image;
    var itemhtml = '<div class="order-listdetails-wrap">
    <div class="orderTitle">Popcorn - 250g</div>
    <div class="orderCont">
        <div class="img"><img src="images/img_popcorn.jpg"/></div>
        </div>
        </div>'
} // for loop ends here 

html.append(itemhtml);

TO：

var itemhtml = '';
for (var i = 1; i < divdata.data.length; i++) {
    var itemname = divdata.data[i].name;
    var image = divdata.data[i].image;
    itemhtml += '<div class="order-listdetails-wrap">
    <div class="orderTitle">' + itemname + '</div>
    <div class="orderCont">
        <div class="img"><img src="' + image + '"/></div>
        </div>
        </div>'
} // for loop ends here 

html.append(itemhtml);

Answer 3

这是因为你在循环退出之后追加所以它只会附加循环的最后一项，它也会抛出运行时错误，因为itemhtml在循环之外将无法使用append语句应该在里面循环，所以它附加每个项目：

  for (var i = 1; i < divdata.data.length; i++) {
     var itemname = divdata.data[i].name;
    var image = divdata.data[i].image;
     var itemhtml = '<div class="order-listdetails-wrap">
                        <div class="orderTitle">Popcorn - 250g</div>
                        <div class="orderCont">
                       <div class="img"><img src="images/img_popcorn.jpg"/></div>
                       </div>
                       </div>';
    html.append(itemhtml);
    } // for loop ends here

在For循环中，只有一个项目被附加到div

3 个答案: