Javascript 如何使用JSON数据进行动态星级评定

我正在开发一个星级评定系统，当你访问任何一家餐厅时，我必须在UI上显示的所有“属性”都是动态的，我得到的数据是JSON格式的

在这里，我有五个属性，每个属性都有高达5星级的评级选项

我的数据：

    [
          {
            "ATTRIBUTEID": "FOODQUALITY",
            "ATTRIBUTENAME": "Quality Of Food",
            "POSITION": 1
          },
          {
            "ATTRIBUTEID": "CLEANLINESS",
            "ATTRIBUTENAME": "Cleanliness",
            "POSITION": 2
          },
          {
            "ATTRIBUTEID": "SERVICE",
            "ATTRIBUTENAME": "Service",
            "POSITION": 3
          },
          {
            "ATTRIBUTEID": "STAFFBEHAVE",
            "ATTRIBUTENAME": "Staf Behavior",
            "POSITION": 4
          },
          {
            "ATTRIBUTEID": "AMBIENCE",
            "ATTRIBUTENAME": "Ambience",
            "POSITION": 5
          }
        ];

我试图实现的是：

我所做的

@charset“ISO-8859-1”；
影星{
宽度：300px；
显示：内联块；
左边距：-35px；
}
.通用{
左边距：55像素；
字体系列：无衬线；
字体大小：粗体；
页边距底部：0；
}
input.star{
显示：无；
}
星号{
浮动：对；
填充物：5px；
字体大小：40px；
颜色：灰色；
过渡：all.2s；
利润上限：-25px；
}
人力资源{
保证金：0；
}
输入。星号：选中~标签。星号：之前{
内容：'\2605'；
颜色：#ffd309；
过渡：全部为0.25秒；
}
输入。star-5:选中~标签。star:之前{
颜色：#840；
文本阴影：0 0 20px#952；
}
输入。star-1:选中~标签。star:之前{
颜色：#f24800；
}
标签。星星：悬停{
变换：旋转（-15度）比例（1.3）；
光标：指针；
}
明星：之前{
内容：'\2605'；
}

清洁
食品质量

这是创建动态星级的方法

var数据=[
{
“属性ID”：“食品质量”，
“属性名称”：“食品质量”，
“职位”：1
},
{
“属性ID”：“清洁度”，
“数量”：“清洁度”，
“职位”：2
},
{
“ATTRIBUTEID”：“服务”，
“数量”：“服务”，
“职位”：3
},
{
“ATTRIBUTEID”：“STAFFBEHAVE”，
“数量”：“Staf行为”，
“职位”：4
},
{
“属性ID”：“氛围”，
“数量”：“氛围”，
“职位”：5
}
];
对于（v=0；v您的第二个示例不起作用，因为每个
表单组
中的输入没有相同的
名称
。给它们相同的
名称
将解决您的问题

您的星号是
float:right
，因此您需要按降序追加星号以使其按预期工作，否则左侧的第一个星号将具有值
5

我还简化了代码以使用元素属性，而不是
setAttribute（）
方法：


var数据=[
{
“属性ID”：“食品质量”，
“属性名称”：“食品质量”，
“职位”：1
},
{
“属性ID”：“清洁度”，
“属性名称”：“清洁度”，
“职位”：2
},
{
“ATTRIBUTEID”：“服务”，
“ATTRIBUTENAME”：“服务”，
“职位”：3
},
{
“ATTRIBUTEID”：“STAFFBEHAVE”，
“ATTRIBUTENAME”：“Staf行为”，
“职位”：4
},
{
“属性ID”：“氛围”，
“属性名称”：“氛围”，
“职位”：5
}
];
对于（i=0；i0；j--）{
var star=document.createElement（“输入”）；
var label=document.createElement（“标签”）；
star.type=“收音机”；
star.id=data[i].ATTRIBUTEID+j；
star.name=data[i].ATTRIBUTEID；
star.className=“star-”+j；
star.value=j；
label.className=“星星-”+j；
label.htmlFor=data[i].ATTRIBUTEID+j；
表格_组。附加（星号、标签）；
}
行追加（commonLabel，form_group）；
container.appendChild（行）；
}
$（“#提交”）。单击（函数（）{
var formData=$（“#容器”）.serialize（）；
警报（formData）；
})；
div.stars{
宽度：300px；
显示：内联块；
}
.通用{
左边距：55像素；
字体系列：无衬线；
字体大小：粗体；
}
input.star{
显示：无；
} 
星号{
浮动：对；
填充物：5px；
字体大小：30px；
颜色：灰色；
过渡：all.2s；
}
输入。星号：选中~标签。星号：之前{
内容：'\2605'；
颜色：#FD4；
过渡：全部为0.25秒；
}
输入。star-5:选中~标签。star:之前{
颜色：#FE7；
文本阴影：0 0 20px#952；
}
输入。star-1:选中~标签。star:之前{
颜色：#F62；
}
标签。星星：悬停{
变换：旋转（-15度）比例（1.3）；
光标：指针；
}
明星：之前{
内容：'\2605'；
}

提交
检查下面的代码snipet我做了一些更正，添加了提交按钮以获得结果


$（文档）.ready（函数（）{
风险值数据=[{
“属性ID”：“食品质量”，
“属性名称”：“食品质量”，
“职位”：1
},
{
“属性ID”：“清洁度”，
“属性名称”：“清洁度”，
“职位”：2
},
{
“ATTRIBUTEID”：“服务”，
“ATTRIBUTENAME”：“服务”，
“职位”：3
},
{
“ATTRIBUTEID”：“STAFFBEHAVE”，
“ATTRIBUTENAME”：“Staf行为”，
“职位”：4
},
{
“属性ID”：“氛围”，
“属性名称”：“氛围”，
“职位”：5
}
];
对于（v=0；vinput.star:checked~label.star:before {

$(this).siblings("input").each(function() {
  $(this).prop("checked", false);
});