我试图创建一个颜色说明,显示哪种颜色表示哪种表示形式(字符串),因此我创建了一个遍历所有可能的字符串并返回指定颜色的开关。这在除IE和Edge之外的所有浏览器中均能正常工作。
在IE和Edge中,问题在于列表的每个元素都以开关的默认情况结尾,因此得到background-color:white
,因此在我看来,开关的字符串比较中有些错误,但是我不明白那是什么,我怎么解决。
希望你们中有人能帮助我。在此先感谢和问候:)
.my-legend .legend-title {
content: " ";
position: relative;
top: 6px;
left: 0;
display: block;
width: 100%;
height: 28px;
border: 2px solid #666;
border-radius: 10px;
background: #666;
z-index: -1;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
/*Use this Property to stetch height of legend and diagram*/
padding-bottom: 200px;
}
.my-legend .legend-scale ul li {
color: #666;
font-size: 100%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-top: 5px;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 20px;
width: 20px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
border-radius: 10px;
filter: none;
}
.my-legend .legend-scale{
margin: 0px 25px;
}
<div class="my-legend"> <!--class = "dropdown"-->
<div class='legend-title'>Legend</div> <!-- class="headline2"-->
<div class="legend-scale"> <!--id="legend" -->
<ul class="legend-labels">
<li><span></span>9th grade of compulsory school</li>
<li><span></span>Not in education or training</li>
<li><span></span>Intermediate solutions</li>
<li><span></span>Vocational education and training upper secondary</li>
<li><span></span>General education upper secondary</li>
<li><span></span>Economically active with upper sec. diploma</li>
<li><span></span>Economically active without upper sec. diploma</li>
<li><span></span>Neither economically active nor in education or training</li>
<li><span></span>Tertiary A = Universities and Universities of Applied Sciences</li>
<li><span></span>Tertiary B = other postsecondary education and training</li>
</ul>
</div>
</div>
<script>
//define each color
var school = "#666";
var coational_education = "#6CA";
var general_education = "#088";
var intermediate = "#F68";
var not_in_education = "#F18";
var tertiary_a = "#909";
var tertiary_b = "#DBD";
var no_edu_no_emp = "#DDD";
var work_no_dipl = "#AAA";
var work_dipl = "#888";
var notsure = "#FF0";
var list = document.getElementsByClassName("legend-labels");
for (var x = 0; x<list[0].children.length; x++)
{
switch(list[0].children[x].innerText)
{
case "9th grade of compulsory school":
list[0].children[x].firstChild.style.background = school;
break;
case "Not in education or training":
list[0].children[x].firstChild.style.background = not_in_education;
break;
case "Intermediate solutions":
list[0].children[x].firstChild.style.background = intermediate;
break;
case "Vocational education and training upper secondary":
list[0].children[x].firstChild.style.background = coational_education;
break;
case "General education upper secondary":
list[0].children[x].firstChild.style.background = general_education;
break;
case "Economically active with upper sec. diploma":
list[0].children[x].firstChild.style.background = work_dipl;
break;
case "Economically active without upper sec. diploma":
list[0].children[x].firstChild.style.background = work_no_dipl;
break;
case "Neither economically active nor in education or training":
list[0].children[x].firstChild.style.background = no_edu_no_emp;
break;
case "Tertiary A = Universities and Universities of Applied Sciences":
list[0].children[x].firstChild.style.background = tertiary_a;
break;
case "Tertiary B = other postsecondary education and training":
list[0].children[x].firstChild.style.background = tertiary_b;
break;
default:
list[0].children[x].firstChild.style.background = "white";
}
}
</script>