javascript dynamic content with select long running script

В основном пытался выяснить некоторые вещи в javascript, поэтому было сделано несколько div, а выбор, поэтому в зависимости от выбранного параметра зависит от того, какой div показан/скрыт.javascript dynamic content with select long running script

Кажется, что все нормально, скрывая все, кроме первого 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>

источник

2016-05-07 wsjlisseter

У вас есть опечатка = должен быть ==

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

Я рекомендую использовать JQuery (тумблер), чтобы справиться с такого рода вещи, хотя :)

источник

2016-05-07 13:25:11 Luis

Ха-ха , так просто. Благодаря! Почему вы рекомендуете jQuery? Просто подумал, так как я не буду использовать много javascript, загрузка библиотеки может быть немного. Но я совсем новичок в этом javascript. – wsjlisseter

Вы правы! если это все, что вы делаете, загрузка jQuery не принесет никакой пользы, но если вы продолжите добавлять функции, вы увидите, что многие вещи, которые вам нужны, уже являются частью jQuery. Таким образом, он делает кодовым и кросс-браузер совместимым (проще в обслуживании). – Luis

А, спасибо. Я обязательно посмотрю, как узнать больше jQuery, если у вас получится немного больше javascripty :) – wsjlisseter

javascript dynamic content with select long running script

ответ

Смежные вопросы