带有选择长时间运行脚本的 javascript 动态内容答案

【问题标题】：javascript dynamic content with select long running script带有选择长时间运行脚本的 javascript 动态内容
【发布时间】：2016-05-07 13:15:49
【问题描述】：

基本上一直在尝试找出一些 javascript 的东西，因此制作了几个 div 和一个选择，因此取决于所选的选项，取决于显示/隐藏的 div。

它似乎正常工作，躲在加载后的所有第一个div，然后选择第二个选项时，它显示第二个div，通过附加一个类来隐藏第一个。

不过，当我将选项改回第一个 div 时，它会创建一个长时间运行的脚本，将所有内容都卡住，我无法弄清楚长时间运行的脚本来自哪里。

任何建议表示赞赏。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .itemCont.show{
        display:block;
      }
      .itemCont.hide{
        display:none;
      }
    </style>
  </head>
  <body onload="sortDivs();">
    <select name="options" id="opts" onchange="optSelect(this);">
      <option value="0">item</option>
      <option value="1">another</option>
    </select>
    <div class="output">
      <div class="itemCont show" id="div0">
        <h1>1</h1>
      </div>
      <div class="itemCont" id="div1">
        <h1>2</h1>
      </div>
    </div>
  </body>
  <script async="async" ype="text/javascript">
  function sortDivs(){
    var divs = document.getElementsByClassName('itemCont');
    for( var i = 0; i < divs.length; i++ ){
      if(i>0){
        divs[i].className += ' hide';
      }
    }
  }

  function optSelect(opt){
    var val = opt.value;
    var divs = document.getElementsByClassName('itemCont');
    var divActive = document.getElementsByClassName("itemCont show");
    divActive[0].className = divActive[0].className.replace(/\bshow\b/,'hide');

    for ( var i = 0; i < divs.length; i++ ) {
      if(i = val){
        divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
      }
    }

  }

  </script>
</html>

【问题讨论】：

标签： javascript html dynamic long-running-processes

【解决方案1】：

你有一个错字=应该是==

for ( var i = 0; i < divs.length; i++ ) {
    if(i == val){
        divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
    }
}

我建议使用 jQuery (toggle) 来处理这类事情 :)

【讨论】：

哈哈，这么简单。谢谢！你为什么推荐 jQuery？只是想，因为我不会使用太多的 javascript，所以加载库可能会有点多。但我对所有这些 javascript 的东西都很陌生。
你是对的！如果这就是你所做的一切，那么加载 jQuery 没有任何好处，但是如果你继续添加特性，你会发现很多你需要的东西已经是 jQuery 的一部分。因此，它使代码精简并跨浏览器兼容（更易于维护）。
啊，谢谢。我肯定会学习更多 jQuery，以防事情变得更加 javascripty :)