通过遍历Javascript中的数组来显示图例

Question

这是我想要的结果

此刻，我像这样对它进行硬编码：

<a href='#' id="educational"><span style='background-color: #65dc1e'></span><b>Educational Support</b></a><br>
<a href='#' id="economic"><span style='background-color: #17f3d1'></span><b>Economic Sufficiency</b></a><br>
<a href='#' id="service"><span style='background-color: #e55e5e'></span><b>International Service</b></a><br>
<a href='#' id="environmental"><span style='background-color: #1743f3'></span><b>Environmental Stewardship</b></a><br>
<a href='#' id="health"><span style='background-color: #ba55d3'></span><b>Health & Wellness</b></a><br>
<a href='#' id="justice"><span style='background-color: #FFFF00'></span><b>Social Justice</b></a><br>

但是我想动态地包含两个任务区域和颜色数组来填充图例：

var mission = ["Economic Sufficiency", "Educational Support", "Environmental Stewardship", "Health and Wellness", "International Service", "Social Justice"]
var colorcode = ['#17f3d1','#65dc1e', '#1743f3', '#ba55d3', '#e55e5e', '#FFFF00']

对两个阵列中的顺序进行排序和配置，以使每种颜色对应于正确的任务区域。我当前的代码是这样：

var select = '';
select += '<a href="#" ' + 'id='+'"all"><span style="background-color: black"></span><b>All Mission Areas</b></a>' + "<br>";
for (var i=1;i<=Missionarea.length;i++){
    var color = colorcode[i]
    var mission = Missionarea[i]
    select += '<a href="#" ' + 'id='+'"mission.valueOf()"><span style="background-color: color"></span><b>mission.toString()</b></a>' + "<br>";
}
$('#legend').html(select);

我尝试了多种方法，但无法获得想要的结果；这是

• 将任务区域分配给id标签，并作为图例中的选项
• 分配匹配的颜色

如果您对此有任何建议，将不胜感激。

Answer 1

您的 select 字符串格式不正确。您的代码中使用的变量名也不匹配。您可以使用以下字符串串联来格式化 htmlString ：

select += '<a href="#" id="'+mission.valueOf()+'"><span style="background-color:'+color+'"><b>'+mission.toString()+'</b></span></a>' + "<br>";

工作代码示例：

var Missionarea = ["Business", "Government Agency", "Higher Education Institution", "K-12", "Nonprofit"]
var colorcode = ['#17f3d1','#65dc1e', '#1743f3', '#ba55d3', '#e55e5e', '#FFFF00']

var select = '';
select += '<a href="#" ' + 'id='+'"all"><span style="background-color: black"></span><b>All Mission Areas</b></a>' + "<br>";
for (var i=0;i<Missionarea.length;i++){
    var color = colorcode[i]
    var mission = Missionarea[i]
    select += '<a href="#" id="'+mission.valueOf()+'"><span style="background-color:'+color+'"><b>'+mission.toString()+'</b></span></a>' + "<br>";
}
$('#legend').html(select)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="legend"></div>

尽管我更喜欢Template Literals，它允许嵌入表达式，例如：

select += `<a href="#" id="${mission.valueOf()}"><span style="background-color: ${color}"><b>${mission.toString()}</b></span></a><br>`;

工作代码示例：

var Missionarea = ["Business", "Government Agency", "Higher Education Institution", "K-12", "Nonprofit"]
var colorcode = ['#17f3d1','#65dc1e', '#1743f3', '#ba55d3', '#e55e5e', '#FFFF00']

var select = '';
select += '<a href="#" ' + 'id='+'"all"><span style="background-color: black"></span><b>All Mission Areas</b></a>' + "<br>";
for (var i=0;i<Missionarea.length;i++){
    var color = colorcode[i]
    var mission = Missionarea[i]
    select += `<a href="#" id="${mission.valueOf()}"><span style="background-color: ${color}"><b>${mission.toString()}</b></span></a><br>`;
}
$('#legend').html(select)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="legend"></div>

Answer 2

这应该有效。

var missionDom = document.querySelectAll('a');

missionDom.forEach(function(val, idx ){
    val.children[0].styles.background-color = colorCode[idx];
    val.children[1].textContent = mission[idx];

document.querySelector('#legend').appendChild(val);
});