Switch中的字符串比较在IE和Edge中不起作用

时间:2018-09-04 11:37:36

标签: javascript html internet-explorer switch-statement microsoft-edge

我试图创建一个颜色说明,显示哪种颜色表示哪种表示形式(字符串),因此我创建了一个遍历所有可能的字符串并返回指定颜色的开关。这在除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>

0 个答案:

没有答案