0

我一直在做一个 Web 项目，虽然我对 HTML 和 CSS 非常熟悉，但我对 JavaScript 还是很陌生。这是我当前的设置：

//in full setup, the var is stored as a seperate file, loaded first, to make the JSON more convenient to edit
var jsonList = 
{
    "first": {
        "Friendly": "Nest Mini (2nd gen)",
        "Model": "Google Nest Mini (2nd Generation)",
        "Manufacturer": "Google",
        "Type": "speaker",
        "Tech": [
            "wifi"
        ],
        "Software": [
            "Google Home"
        ]
    }
};

document.getElementById("friendly").innerHTML = jsonList.first.Friendly;
document.getElementById("model").innerHTML = jsonList.first.Model;
document.getElementById("manufacturer").innerHTML = jsonList.first.Manufacturer;
document.getElementById("type").innerHTML = jsonList.first.Type;
document.getElementById("tech").innerHTML = jsonList.first.Tech;
document.getElementById("software").innerHTML = jsonList.first.Software;
#card {
    font-family: 'Roboto', sans-serif;
    vertical-align:top;
    border-radius:25px;
    background-color:white;
    box-shadow: 0 4px 8px 0 #0000002a, 0 6px 20px 0 #0000002a;
    position:relative;
    line-height:8px;
    height:150px;
    padding-left:150px /* normally an icon goes to the left */
}

#friendly {
    font-size:40px;
    padding-top:30px;
    line-height:0px
}
#model {
    opacity:40%;
    line-height:0px;
    padding-bottom:4px;
}
#type,#tech,#software {
    display:inline
}
    <div id="card">
        <p id="friendly"></p>
        <p id="model"></p>
        <p>Made by <span id="manufacturer"></span></p>
        <p id="type"></p>
        <p id="tech"></p> 
        <p id="software"></p>
    </div>

我想做的是能够添加“第二个”、“第三个”等，并自动制作相对数量的 div。因此，例如，如果我在 JSON 中有 3 个条目，我将有 3 <div id="code">。（理想情况下，这些值将命名为“0001”、“0002”等等，但这似乎会引入超出此范围的新问题。）

无论如何，我想知道最好的方法是什么。当我查看它时，我看到您可以附加到 JS 中的列表，所以也许这将是采取的路线，但我不确定。希望在网络技术方面有更多经验的人可以为我指明正确的方向。谢谢！

4

1 回答 1

0

似乎是 html<template>元素的完美候选者。请注意，重复的 ID 不是合法的 html。我已将 ID 更改为 Classes 以避免该问题。

我还稍微修改了 JSON 数据的格式。我已将各个项目存储到一个数组中。这似乎比命名属性（如“first”、“second”、“last”等）更好。您假设数组中的第一项是 first 和 next second，等等...

"use strict";
window.addEventListener('load', onLoaded, false);

var jsonListItems = 
[
            {
                "Friendly": "Nest Mini (2nd gen)",
                "Model": "Google Nest Mini (2nd Generation)",
                "Manufacturer": "Google",
                "Type": "speaker",
                "Tech": ["wifi"],
                "Software": ["Google Home"]
            },
            {
                "Friendly": "Nest Max (32nd gen)",
                "Model": "Google Nest Max (0x20 nd Generation)",
                "Manufacturer": "Goggle",
                "Type": "siren",
                "Tech": ["blue-toof"],
                "Software": ["Google Ghetto blastah"]
            }
];

function onLoaded(event)
{
    jsonListItems.forEach( item => document.body.appendChild(makeItemDisplay(item)) );
    
    function makeItemDisplay(data)
    {
        let src = document.getElementById('cardTemplate');
        let newCard = src.content.cloneNode(true);
        
        newCard.querySelector('.friendly').textContent = data.Friendly;
        newCard.querySelector('.model').textContent = data.Model;
        newCard.querySelector('.manufacturer').textContent = data.Manufacturer;
        
        newCard.querySelector('.type').textContent = data.Type;
        newCard.querySelector('.tech').textContent = data.Tech;
        newCard.querySelector('.software').textContent = data.Software;
        
        return newCard;
    }
}
.card {
    font-family: 'Roboto', sans-serif;
    vertical-align:top;
    border-radius:25px;
    background-color:white;
    box-shadow: 0 4px 8px 0 #0000002a, 0 6px 20px 0 #0000002a;
    position:relative;
    line-height:8px;
    height:150px;
    padding-left:150px /* normally an icon goes to the left */
}
<template id='cardTemplate'>
<div class="card">
        <p class="friendly"></p>
        <p class="model"></p>
        <p>Made by <span class="manufacturer"></span></p>
        <p class="type"></p>
        <p class="tech"></p> 
        <p class="software"></p>
</div>  
</template>

于 2021-09-08T02:17:19.987 回答