Хранение/показ divs с javascript с таймером

Question

Этот сайт сохранил мне миллион раз, но теперь я пытаюсь сделать что-то похожее на заголовок раздела this и не может заставить его работать. Я хотел бы кто-то, чтобы помочь мне следующее:

Вот мой пример кода:

<div class="container"> 
    <div class="row" style="padding-top: 50px;"> 
     <div class="col-md-4"> 
      <div id="first" class="cube color1"></div> 
      <div id="second" class="cube color3" style="display: none;"></div> 
     </div> 
     <div class="col-md-4"> 
      <div id="first" class="cube color2"></div> 
      <div id="second" class="cube color1" style="display: none;"></div> 
     </div> 
     <div class="col-md-4"> 
      <div id="first" class="cube color3"></div> 
      <div id="second" class="cube color2" style="display: none;"></div> 
     </div> 
    </div> 
    <div class="row" style="padding-top: 50px;"> 
     <div class="col-md-4"> 
      <div id="first" class="cube color3"></div> 
      <div id="second" class="cube color2" style="display: none;"></div> 
     </div> 
     <div class="col-md-4"> 
      <div id="first" class="cube color2"></div> 
      <div id="second" class="cube color1" style="display: none;"></div> 
     </div> 
     <div class="col-md-4"> 
      <div id="first" class="cube color1"></div> 
      <div id="second" class="cube color3" style="display: none;"></div> 
     </div> 
    </div> 
</div> 

Javascript:

<script> 

    setInterval(hide, 2000); 

    function switchDivs() 
    { 
     var first = document.getElementById("first"); 
     var second = document.getElementById("second"); 
    } 

    function hide() { 
     document.getElementById("first").style.display="none"; 
     document.getElementById("second").style.display="block"; 
    } 

    function show() { 
     document.getElementById("first").style.display="block"; 
     document.getElementById("second").style.display="none"; 
    } 
</script> 

ссылка jsfiddle

Я не понимаю, первый, почему он не изменяет всех «первых» div на «second», он меняет только первый div. Затем следующий вопрос заключается в том, как заставить это действие повторяться со временем, желательно больше как случайный таймер для каждого из 6 позиций/ящиков.

Вкратце: мне нужны divs с id = "first" для обмена с div с id = "second", после 5-10 секундной задержки после загрузки страницы. Затем, после такой же задержки, мне нужно, чтобы они переключились обратно на показ только div с id = «первым» и т. Д. ... (что-то вроде функции setInterval).

Answer 1

setInterval(function() { $(".color-blocks .col-md-4").each(function() { $(this).children().toggle(); }); }, 2000); 

Простая строка кода может быть полезна и проще.

работает скрипку: https://jsfiddle.net/65k788u6/3/

при использовании ids, те должны быть уникальными, поэтому вместо того, чтобы использовать toggle() для того, чтобы сделать его проще.

Answer 2

извините, у меня нет 50 представителей, чтобы оставить комментарий. Проблема в том, что у вас несколько элементов с одинаковым идентификатором? Кажется, getElementById() возвращает первый экземпляр, который является истинным, а не с тем же идентификатором. Я бы рекомендовал использовать getelementsbyclassname() и использовать классы вместо ID для описания групп элементов. Обновлен скрипт, чтобы показать, как это делается. версия 4.

Answer 3

1. Ваш HTML-код недействителен. Атрибут идентификатора для любого элемента всегда должен быть уникальным в контексте всей страницы.
2. Вместо .getElementById, который выбирает только один элемент (и только по его атрибуту ID), вы можете использовать .querySelectorAll, чтобы получить все элементы, соответствующие выбранному селектору запросов CSS (или .querySelector, чтобы получить один элемент).
3. Я рекомендую использовать setTimeout вместо setInterval в качестве общей передовой практики.

var rows = document.querySelectorAll(".col-md-4"); 
 
var indices = getIndices(rows); 
 
setTimeout(flipRows, 5000); 
 

 
function getIndices() { 
 
    var arr = []; 
 
    for (var i = 0, len = rows.length; i < len; i++) { 
 
    arr.push(i); 
 
    } 
 
    return arr; 
 
} 
 

 
function flipRows() { 
 
    if (indices.length == 0) { 
 
    indices = getIndices(); 
 
    } 
 
    var index = Math.random() * indices.length >>> 0; 
 
    var randomRow = rows[indices[index]]; 
 
    indices.splice(index, 1); 
 
    flipRow(randomRow); 
 
    setTimeout(flipRows, 5000); // run again in 5 seconds 
 
} 
 

 
function flipRow(row) { 
 
    var first = row.querySelector(".first"); 
 
    var second = row.querySelector(".second"); 
 
    if (first.style.display === "none") { 
 
    first.style.display = "block"; 
 
    second.style.display = "none"; 
 
    } else { 
 
    first.style.display = "none"; 
 
    second.style.display = "block"; 
 
    } 
 
}

.color1 { background-color: pink;} 
 
.color2 { background-color: lightblue;} 
 
.color3 { background-color: lightgreen;}

<div class="container"> 
 
    <div class="row" style="padding-top: 50px;"> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color1">first</div> 
 
     <div class="second cube color3" style="display: none;">second</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color2">first</div> 
 
     <div class="second cube color1" style="display: none;">second</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color3">first</div> 
 
     <div class="second cube color2" style="display: none;">second</div> 
 
    </div> 
 
    </div> 
 
    <div class="row" style="padding-top: 50px;"> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color3">first</div> 
 
     <div class="second cube color2" style="display: none;">second</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color2">first</div> 
 
     <div class="second cube color1" style="display: none;">second</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="first cube color1">first</div> 
 
     <div class="second cube color3" style="display: none;">second</div> 
 
    </div> 
 
    </div> 
 
</div>