javascript - 我需要让两个div交替显示 "block"和 "none"

Question

问题是我的 block 没有更改其属性，但 console.log() 工作正常。怎么了？

这是我的代码:

var imageContainer = document.querySelector('.image-container'); // My first div
var imageContainerSecond = document.querySelector('.image-container-second'); // My second div

setInterval(function() { // i am using set interval to call this function every 2 seconds

  if (imageContainer.style.display === 'block') { // I checking if my div has property of 'block'
    imageContainerSecond.style.display = 'none'; // if it block, another div has to become 'none'
    console.log('error');
  } else(imageContainerSecond.style.display === 'none') { // here opposite logic
    imageContainer.style.display = 'block';
    console.log('ok');
  }
}, 2000); // my interval

Answer 1

您需要删除(imageContainerSecond.style.display = 'none')记住这是一个else。

您的image-container div需要以style="display: block;"开头:

<div class="image-container" style="display: block;">One</div>

在每种情况下，您都需要设置正确的样式。

类似这样的事情:

var imageContainer = document.querySelector('.image-container');
var imageContainerSecond = document.querySelector('.image-container-second');

setInterval(function() {
  if (imageContainer.style.display === 'block') {
    imageContainer.style.display = 'none';
    imageContainerSecond.style.display = 'block';
  } else {
    imageContainer.style.display = 'block';
    imageContainerSecond.style.display = 'none';
  }
}, 2000);

<div class="image-container" style="display: block;">One</div>
<div class="image-container-second">Two</div>