Javascript 将JSON对象数据与单个div连接

因此，我正试图建立一个网站，列出各种水果，并指出它们目前是否在这个季节。我构建了一个JSON对象，它有水果的名称，一个数组显示水果的季节月份，一个

boolean

设置为

false

我对每个水果的

html

遵循以下模式：

 <div id="mulberries" class="fruit mulberries">
            <span class="fruitText">Mulberries</span>
            <div class="fruitPic mulberriesPic">
                <div class="layer">
                </div>
            </div>  
        </div>

我从本月获得的数据如下：

 var month = new Date();
 var mm = month.getMonth()+1;

 if(mm<10) {
 mm='0'+mm
 }

 month = mm;

因此，我希望能够使用

div class=“layer”

上的

CSS

，突出显示当前正在上市的水果，并最终让所有div指示悬停事件的实际成熟月份。我似乎不知道如何将

JSON

数据本身连接到其各自的

div

---

到目前为止，我所阅读的内容将我引向jQuery的

.data（key，value）

，但我不知道如何让它工作。任何帮助都将不胜感激。

您需要动态创建它们，您可以尝试使用这种格式。我只展示了几个嵌套对象，但你可以看到它们是一样的

使用jQuery非常相似。。当您有一个父对象时，您可以使用.innerHTML，而不是使用append

var=[
{
“名称”：“桑椹”，
“里贝蒙斯”：[“07”，“08”]，
“isRipe”：错误，
},
{
“名称”：“油桃”，
“里贝蒙斯”：[“05”、“06”、“07”、“08”、“09”、“10”]，
“isRipe”：错误，
},
{
“名称”：“橙子”，
“里贝蒙斯”：[“01”、“02”、“03”、“04”、“05”、“06”、“07”、“08”、“09”、“10”、“11”、“12”]，
“isRipe”：错误，
}
];
var月=新日期（）；
var mm=month.getMonth（）+1；
如果（毫米<10）{
毫米='0'+毫米
}
月=毫米；
对于（i=0；i-1）{
（果[i].isRipe）=真
}否则{
（水果[i].isRipe）=假
}
};
函数render（）{
对于（i=0；irender（）

您的循环可以找到相应fruit DIV中的

层

DIV，并添加或删除影响CSS的类

for (i = 0; i < fruits.length; i++) {
    if (fruits[i].ripeMonths.indexOf(month) > -1) {
        (fruits[i].isRipe) = true;
        document.querySelector(".fruit." + fruits[i].name + " .layer").classList.add("inseason");
    } else {
        (fruits[i].isRipe) = false;
        document.querySelector(".fruit." + fruits[i].name + " .layer").classList.remove("inseason");
    }
};

for（i=0；i-1）{
（果[i].isRipe）=真；
document.querySelector（“.fruit.”+fruits[i].name+“.layer”）.classList.add（“inseason”）；
}否则{
（水果[i].isRipe）=假；
document.querySelector（“.fruit.”+fruits[i].name+“.layer”）.classList.remove（“inseason”）；
}
};
因此，您需要：

确定水果的名字
设定他们成熟的月份，然后在盘旋中展示
仅突出显示实际正在撕裂的水果
除非由于其他强制原因（即，它们是一个组件）而需要所有这些HTML，否则我认为您只能通过
（或
，无论什么）来实现

你对
数据（键，值）
的怀疑只是夸大了：也许如果你改为阅读
prop（键，值）
你会更好地理解

这两种方法之间的唯一区别是
data
设置了一个HTML属性（您可以对正常属性（如
id
）执行相同的操作，但我认为分离这类数据很好）。在这种情况下，你甚至不需要它；通过使用，您可以实现悬停效果

现在你知道该做什么了，我们可以开始工作了：


$（文档）.ready（函数（）{
/*
*你的水果在这里。如果你能改变成熟的月份并将其设置为
*如果没有，只需设置变量
*“月”实际上是用零和字符串表示的
*（“.toString（）”）。
*/
风险值=[
{“name”：“Apple”，“ripeMonths”：[3]}，
{“name”：“Banana”，“ripeMonths”：[8]}
];
var容器=$（“#水果”）；
变量月份=（新日期（）.getMonth（）+1）；
美元。每个（水果，功能（i，水果）{
/*
*我们将为每个水果创建一个跨度，为
*成熟信息和高亮度类。
*/
var p=$（“”）；
var title=“水果是在上面成熟的”。concat(
水果。里贝蒙斯。加入（“，”）
);
//然后可以在同一行中连接所有对象。
p、 文本（水果名称）；
//现在，这段文字将显示水果成熟的月份。
p、 道具（“头衔”，头衔）；
//只有当这是一个激动人心的月份。
如果（水果、里贝蒙斯、指数（月）！=-1）{
p、 addClass（“高亮度”）；
}
//我们将新水果附加到水果容器中。
容器。附加（p）；
});
});
.highlightth:悬停{
/*视觉的*/
背景颜色：卡其色；
}

水果状况
您是否询问如何通过AJAX加载数据？mulberries在
中做什么？这应该是课程的一部分吗？@AndrewMyers我不这么认为，但我会研究AJAX，看看它是否对我有帮助。@Barmar应该是
我已经更改了它。
 for (i = 0; i < fruits.length; i++) {
if (fruits[i].ripeMonths.indexOf(month) > -1) {

    (fruits[i].isRipe) = true
} else {
    (fruits[i].isRipe) = false
}

};

for (i = 0; i < fruits.length; i++) {
    if (fruits[i].ripeMonths.indexOf(month) > -1) {
        (fruits[i].isRipe) = true;
        document.querySelector(".fruit." + fruits[i].name + " .layer").classList.add("inseason");
    } else {
        (fruits[i].isRipe) = false;
        document.querySelector(".fruit." + fruits[i].name + " .layer").classList.remove("inseason");
    }
};