如何在JavaScript中將對象數組附加到卡元素

Question

我對javascript非常陌生，正在從事一個小項目。 我的javascript文件中有一小部分對象，我想使用它們創建和填充產品卡。

我當前設置的產品卡大約有20行，我采用了這種方法來查看是否可以使用document.createElement ... append元素等，這樣做之后，我遇到了一些問題，對象似乎是未定義的，另外我需要能夠附加到標簽中，這樣我才能定義類和id以便我的CSS可以選擇代碼並使之漂亮，例如<div class = "test>" 。 總體而言，這只是一團糟，將需要三倍的代碼行來構建卡。

這是我的javascript數組的片段

       window.products = [
    {
        name: "Berry Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    },

這是我要使用的卡片布局的一個片段。

 <div class="product-card">
            <div class="badge">Hot</div>
            <div class="product-tumb">
                <img src="images/dog-running.jpg" alt="" />
            </div>
            <div class="product-details">
                <span class="product-catagory">dog1,dog2</span>
                <h4><a href="">big boy</a></h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Vero, possimus nostrum!
                </p>
                <div class="product-bottom-details">
                    <div class="product-price">
                        <small>$96.00</small>$230.99
                    </div>
                    <button>buy now</button>
                    <div class="product-links">
                        <a><i class="fa fa-heart"></i></a>
                        <a><i class="fa fa-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>

我希望使用與陣列中對象一樣多的卡填充頁面。

到目前為止，我的結果只是未定義的，基本上是一堆代碼，我可以提供正在使用的代碼，但是它沒有用，並且我不想在此基礎上構建。 我聽說過.map很有用，但我不確定使用它的全部潛力。

Answer 1

您可以使用JS遍歷每個產品，使用模板文字語法（ ${variable} ）組合產品，然后將其重新注入DOM。

例：

 products = [ { name: "Berry Leash", img: 'src="images/leashes/berry.jpg" alt="berry leash"', price: 14.99, onsale: 0.0, tags: "Leash", description: "A fresh taste on a collar," }, { name: "Tommy Leash", img: 'src="images/leashes/berry.jpg" alt="berry leash"', price: 14.99, onsale: 0.0, tags: "Leash", description: "A fresh taste on a collar," } ] products.forEach(product => { var div = document.querySelector('div') div.innerHTML = div.innerHTML + ` <div class="product-card"> <div class="badge">Hot</div> <div class="product-tumb"> <img src="images/dog-running.jpg" alt="" /> </div> <div class="product-details"> <span class="product-catagory">dog1,dog2</span> <h4><a href="">${product.name}</a></h4> <p> ${product.description} </p> <div class="product-bottom-details"> <div class="product-price"> <small>$96.00</small>${product.price} </div> <button>buy now</button> <div class="product-links"> <a><i class="fa fa-heart"></i></a> <a><i class="fa fa-shopping-cart"></i></a> </div> </div> </div> </div> <br /> <br /> ` }) 

 <div></div>