JavaScript不改变CSS

Question

我的JavaScript没有正确地将actor-images显示从“none”更改为“block”，我不确定问题是什么，因为它应该正常工作。我已在Web浏览器中测试了此代码，并且控制台没有读回错误，但在使用时，图像没有显示，我无法弄清楚问题是什么。

Hashable

document.addEventListener('DOMContentLoaded', actorGallery);

function actorGallery() {
  var next = document.getElementById("next-button");
  var prev = document.getElementById("previous-button");
  var actorImages = document.getElementsByClassName("actor-images");
  var dots = document.getElementsByClassName("dot");

  var i;

  function showSlides(n) {

    if (n > actorImages.length) {
      slideNumber = 1
    }

    if (n < 1) {
      slideNumber = actorImages.length
    }

    for (i = 0; i < actorImages.length; i++) {
      actorImages[i].style.display = "none";
    }

    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }

    actorImages[slideNumber - 1].style.display = "block";
    dots[slideNumber - 1].className += " active";
  }

  function slideMove(n) {
    showSlides(slideNumber += n);
  }

  var slideNumber = 1;
  showSlides(slideNumber);


  function currentSlide(n) {
    showSlides(slideNumber = n);
  }
  /* End of Citation */

  prev.addEventListener("click", function() {
    if (slideNumber != 1) {

      slideMove(-1);

    }


  });

  next.addEventListener("click", function() {
    if (slideNumber != actorImages.length - 1) {

      slideMove(+1);

    }

  });

  document.querySelectorAll(".dot").forEach(function(ele, i) {
    ele.addEventListener('click', function() {
      console.log(i + 1);
      currentSlide(i + 1);
    })
  });

}

.actor-images {
  display: none;
  height: 150px;
  max-width: 1000px;
  width: 100%;
  vertical-align: middle;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-span {
  text-align: center;
}

Answer 1

经过几分钟的调试

您的容器和为图像划分的持有者具有相同className的容器，因此当此代码

时

actorImages[slideNumber - 1].style.display = "block";

执行主容器显示，当你点击它时，代码隐藏了保存图像的主容器，并设置了第一个img阻止，但由于容器被隐藏，我们无法看到img所以我建议如下：

为您的主容器添加另一个类

.maincontainer{
  height: 150px;
  max-width: 1000px;
  width: 100%;
  vertical-align: middle;
}

然后为子容器添加另一个类

  .actor-images {
    display: none;
    height: 150px;
    max-width: 1000px;
    width: 100%;
    vertical-align: middle;
  }

编辑：

你的新CSS

.actor-images {
  display: none;
  height: 150px;
  max-width: 1000px;
  width: 100%;
  vertical-align: middle;
}
.main{
height: 150px;
  max-width: 1000px;
  width: 100%;
  vertical-align: middle;
}
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-span {
  text-align: center;
}

您的新HTML：

  <div class="gallery-wrapper">
    <div class="main">
      <div class="actor-images fade">
        <div class="image-number">
          1 / 18
        </div>
        <img src="img/frodo.jpg" alt="Elijah Wood - Frodo Baggins">
        <div class="image-caption">
          Elijah Wood - (Frodo Baggins)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          2 / 18
        </div>
        <img src="img/samwise-gamgee-samwise-gamgee.jpg" alt="Sean Astin - Samwise Gamgee">
        <div class="image-caption">
          Sean Astin - (Samwise Gamgee)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          3 / 18
        </div>
        <img src="img/1e53eeea02819531453539bdf3b1d16f.jpg" alt="Dominic Monaghan - Meriadoc 'Merry' Brandybuck">
        <div class="image-caption">
          Dominic Monaghan - (Meriadoc 'Merry' Brandybuck)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          4 / 18
        </div>
        <img src="img/Pippin_Took_profile.jpg" alt="Billy Boyd - Peregrin Took">
        <div class="image-caption">
          Billy Boyd - (Peregrin Took)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          5 / 18
        </div>
        <img src="img/aragorn-lord-of-the-rings.jpg" alt="Viggo Mortensen - Aragorn">
        <div class="image-caption">
          Viggo Mortensen - (Aragorn)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          6 / 18
        </div>
        <img src="img/Orlando-Bloom-as-Legolas-Greenleaf-The-Lord-of-the-Rings-Fellowship-of-the-Ring-Bow.jpg" alt="Orlando Bloom - Legolas Greenleaf">
        <div class="image-caption">
          Orlando Bloom - (Legolas Greenleaf)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          7 / 18
        </div>
        <img src="img/Gimli.jpg" alt="John Rhys-Davies - Gimli">
        <div class="image-caption">
          John Rhys Davis - (Gimli)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          8 / 18
        </div>
        <img src="img/gandalfnod.gif" alt="Sir Ian McKellen - Gandalf the Grey/White">
        <div class="image-caption">
          Sir Ian Mckellen - (Gandalf the Grey/White)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          9 / 18
        </div>
        <img src="img/bilbobaggins.jpg" alt="Ian Holm - Bilbo Baggins">
        <div class="image-caption">
          Ian Holm - (Bilbo Baggins)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          10 / 18
        </div>
        <img src="img/Seanbean_boromir.jpg" alt="Sean Bean - Boromir">
        <div class="image-caption">
          Sean Bean - (Boromir)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          11 / 18
        </div>
        <img src="img/elrond_lotr_090117.jpg" alt="Hugo Weaving - Lord Elrond">
        <div class="image-caption">
          Hugo Weaving - (Lord Elrond)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          12 / 18
        </div>
        <img src="img/theoden.jpg" alt="Bernard Hill - King Theoden">
        <div class="image-caption">
          Bernard Hill - (King Theoden)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          13 / 18
        </div>
        <img src="img/6f4f046b6bbb57dcaf0566897c6f9a1e--arwen-undomiel-liv-tyler.jpg" alt="Liv Tyler - Arwen">
        <div class="image-caption">
          Liv Tyler - (Arwen)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          14 / 18
        </div>
        <img src="img/Eomer_King.jpg" alt="Karl Urban - Eomer">
        <div class="image-caption">
          Karl Urban - (Eomer)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          15 / 18
        </div>
        <img src="img/tumblr_static_eowyn.jpg" alt="Miranda Otto - Eowyn">
        <div class="image-caption">
          Miranda Otto - (Eowyn)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          16 / 18
        </div>
        <img src="img/Faramir.jpg" alt="David Wenham - Faramir">
        <div class="image-caption">
          David Wenham - (Faramir)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          17 / 18
        </div>
        <img src="img/gollum.jpg" alt="Andy Serkis - Gollum/Smeagol">
        <div class="image-caption">
          Andy Serkis - (Gollum/Smeagol) (Motion Capture and Voice)
        </div>
      </div>
      <div class="actor-images fade">
        <div class="image-number">
          18 / 18
        </div>
        <img src="img/saruman.jpg" alt="Christopher Lee - Saruman the White">
        <div class="image-caption">
          Christopher Lee - (Saruman the White)
        </div>
      </div>
    </div>
    <a id="previous-button">&#10094;</a>
    <a id="next-button">&#10095;</a>
  </div>
  <br>
  <div class="dot-span">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>