Hidding/showing div 与 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>

link 到 jsfiddle

首先我不明白为什么它不把所有的"first"div改成"second"，它只改变第一个div。下一个问题是如何使该动作随时间重复，最好更像是 6 positions/boxes 中每一个的随机计时器。

不久：我需要 divs with id="first" 与 divs with id="second" 交换，经过大约 5-10 秒的延迟加载页面。在同样的延迟之后，我需要他们切换回只显示 divs with id="first" 等等......（类似于 setInterval 函数）。

Answer 1

抱歉，我没有 50 个代表可以发表评论。问题是您有多个具有相同 ID 的元素吗？ getElementById() 似乎返回第一个真实的实例，而不是返回具有相同 ID 的实例。我建议使用 getelementsbyclassname() 并使用类而不是 ID 来描述元素组。更新了 fiddle 以显示它是通过这种方式完成的。版本 4.

Answer 2

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

一行简单的代码可能会有所帮助，而且方式更简单。

工作 fiddle : https://jsfiddle.net/65k788u6/3/

当您使用 ids 时，它们应该是唯一的，因此请改用 toggle() 以使其看起来更简单。

Answer 3

您的HTML无效。任何元素的 ID 属性在整个页面的上下文中都应该始终是唯一的。
您可以使用 .querySelectorAll 来获取与给定的 CSS 查询选择器匹配的所有元素，而不是 .getElementById，后者仅选择一个项目（并且仅通过其 ID 属性）或 .querySelector 获取单个元素）。
我建议使用 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>

Hidding/showing div 与 javascript 与定时器

Hidding/showing divs with javascript with timer

html

javascript

css

jquery

setinterval