javascript - 单击时隐藏幻灯片

Question

我试图在单击 X 按钮时隐藏幻灯片，但它不起作用。我不确定它是否与 "id" 或 "class" 有关，但我已经尝试了所有方法，并且它并没有隐藏我想要的内容它到。 (不能使用 Jquery，这是一个小型学校项目)。我通常可以使用该按钮和功能隐藏所有内容，但我无法使其与幻灯片一起使用。

<div id="slideshow-container">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

 <button id="exit" onclick="hideSlides(this, 'slideshow-container')">
  <img id="exit" src="image/exit.png">
 </button>

  <div class="mySlides fade">
    <img src="image/remar1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose9.jpg" style="width:100%">
  </div>

  </div>


//javascript
  function hideSlides(){
  var slides = 
  document.getElementsByClassName("mySlides").style.display="none"

  }

//css
  .mySlides {
  display: none;
  visibility: visible;
  }
  img {vertical-align: middle;}


  #slideshow-container {
  max-width: 1000px;
  height: 200px;
  left: 10px;
  position: relative;
  margin: auto;
  bottom: 1932px;
  visibility: hidden;
  }


 .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;

  }

Answer 1

document.getElementsByClassName 返回 HTMLCollection 。因此，对于当前的 HTML 设计，您必须迭代所有选定的元素并应用您想要的样式。

使用 ES6，您可以使用 Array.from 从类似数组的对象构建数组。
您可以找到 Array.from here 的文档

所以你可以像这样改变你的函数:

function hideSlides(){
    var slides = document.getElementsByClassName("mySlides");
    Array.prototype.forEach.call(slides, function(el) {
        el.style.display = 'none';
    });
}