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个位置/框中的每一个的随机计时器。

很快：我需要将id =“first”的div与id =“second”的div交换，加载页面后延迟5-10秒。在相同的延迟之后，我需要它们切换回只显示id =“first”的div等等...（类似于setInterval函数）。

Answer 1

抱歉，我没有50位代表发表评论。问题是你有多个具有相同ID的元素吗？ getElementById（）似乎返回第一个实例，该实例是真的，而不是使用相同的ID。我建议使用getelementsbyclassname（）并使用类而不是ID来描述元素组。更新了小提琴，以这种方式显示它。版本4。

Answer 2

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

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

工作小提琴：https://jsfiddle.net/65k788u6/3/

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

Answer 3

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

3 个答案: