时间戳

首页 > 解决方案 > 如何通过 div.innerHTML 从 JSON 输入中动态设置数据样式？

javascript - 如何通过 div.innerHTML 从 JSON 输入中动态设置数据样式？

问题描述

我目前正在使用 JS 从 JSON 文件中获取数据并循环通过它以显示在网站上，附加到 html 文件中的 div 即

<div id = "groceries"></div>

JS代码（跳过可以正常工作的获取代码）：

function appendData (data) {
            const mainContainer = document.getElementById ('groceries');
            for (let i = 0; i < data.length; i++) {
                const div = document.createElement ('div');
                div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
                mainContainer.appendChild (div);
            }
    }

“评级”数据需要根据评级设置样式，即绿色代表“低”，琥珀色代表“中”，红色代表“高”……基于 JSON 文件中的内容。

但是，我不确定如何使用纯 JS / html / css 来做到这一点？我已经尝试过四处搜索，但要找到合适的答案非常困难。

标签： javascripthtmlcssfetch-api

解决方案

根据评分值添加一个类。阿卡

function appendData(data) {
    const mainContainer = document.getElementById ('groceries');
    for (let i = 0; i < data.length; i++) {
        const div = document.createElement ('div');
        div.classList.add('rating', 'rating--' + (data.rating < 3 ? 'low' : data.rating > 6 ? 'high' : 'med'));
        div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
            mainContainer.appendChild (div);
    }
}

然后在CSS中你可以简单地做

.rating {
    // Generic styling
}

.rating.rating--low {
    color: #FF0000;
    // Unique Styles
}

.rating.rating--med {
    color: #FFFF00;
    // Unique Styles
}

.rating.rating--high {
    color: #00FF00;
    // Unique Styles
}

推荐阅读