feat: 购物车能显示多个物品

新版闲书网主页/.idea/前端/html/cart.html

@@ -10,6 +10,8 @@
     <link href="../css/bootstrap.min.css" rel="stylesheet">
     <link href="../css/p-i.css" rel="stylesheet">
     <link href="../css/reset.css" rel="stylesheet">
+    <script type="text/javascript" src="../js/cart.js"></script>
+    
 
 </head>
 <style>
@@ -227,5 +229,5 @@
         </div>
     </li>
 </ul>
-
+<script>appendBooks()</script>
 </html>

新版闲书网主页/.idea/前端/js/cart.js

@@ -0,0 +1,73 @@
+class Book {
+    constructor(name, price) {
+        this.name = name
+        this.price = price
+    }
+}
+function appendBooks() {
+    var bookList = [new Book("1", 1),new Book("2", 2)]
+for (book in bookList) {
+    var ul = document.createElement("ul")
+    ul.classList.add("clearfix", "item-content")
+    ul.innerHTML = '<li class=\"td td-chk\"\>\
+    <div class=\"td-inner\"\>\
+        <div style=\"height: 82px;position: relative;\"\>\
+            <div class=\"cart-checkbox\"\>\
+                <input type=\"checkbox\" class=\"chk\"\>\
+            </div\>\
+        </div\>\
+    </div\>\
+</li\>\
+<li class=\"td td-item\"\>\
+    <div class=\"td-inner\"\>\
+        <div class=\"item-pic\"\>\
+            <a href=\"#\"\>\
+                <img src=\"../img/logo.png\" alt=\"物品图片\"\>\
+            </a\>\
+        </div\>\
+        <div class=\"item-info\"\>\
+            <div class=\"item-basic-info\"\>\
+                <div\><p\>Apple/苹果 iPhone 11 Pro</p\></div\>\
+            </div\>\
+            <div class=\"item-other-info\"\>\
+            </div\>\
+        </div\>\
+    </div\>\
+</li\>\
+<li class=\"td td-info\"\>\
+\
+</li\>\
+<li class=\"td td-price\"\>\
+    <div class=\"td-inner\"\>\
+        <div class=\"item-price\"\>\
+            <div class=\"price-content\"\>\
+                <div class=\"price-line\"\>\
+                    <p\>￥8699.00</p\>\
+                </div\>\
+            </div\>\
+        </div\>\
+    </div\>\
+</li\>\
+<li class=\"td td-amount\"\>\
+    <div class=\"td-inner\"\>\
+        <div class=\"amount-wrapper\"\>\
+            <div class=\"item-amount\"\>\
+\
+            </div\>\
+        </div\>\
+    </div\>\
+</li\>\
+<li class=\"td td-sum\"\>\
+    <div class=\"td-inner\"\>\
+        <p class=\"number\"\>￥17398.00</p\>\
+    </div\>\
+</li\>\
+<li class=\"td td-op\"\>\
+    <div class=\"td-inner\"\>\
+        <a href=\"#\"\>移入收藏夹</a\>\
+        <a href=\"#\"\>删除</a\>\
+    </div\>\
+</li\>'
+document.body.appendChild(ul)
+}
+}