Question

嘿我已经创建了一个功能，用幻灯片填充幻灯片的空容器，每个图像都包含在它自己的div中。

我的网页有一定数量的模态图像，点击后会打开幻灯片图像相册。我得到这个工作1张图像，然后意识到，如果它有一定数量的不确定大小的幻灯片，我应该做一个填充幻灯片div的功能。我计划让每个模态图像的数据属性为＆＃34; 1,2,3 ...等＆＃34;并且有一堆数组，其中有多个对象，每个对象的名称相似，并且＃34; 1,2,3 ......等等＃34;然后我将使用此信息创建并将正确的div和图像附加到幻灯片放映容器中。

我已成功完成此操作，但我认为我需要清除所有孩子的父.modal-content div除了两个按钮（.next和.prev），因为模态似乎打开了正确的幻灯片放映，但仅在第一次点击时，其他时候只是不断添加更多的数组。我相信在关闭幻灯片时清除div应该解决这个问题，如果事实上我完全得到内部元素，我认为我的代码应该这样做但是我已经把它从stackoverflow中解脱出来，这肯定是肯定的。

我有这段代码来删除div的内容（请注意，这是我需要添加排除这2个元素的代码的地方，但我已经包含了更多上下文代码）：

function clearSlides(){

    var myNode = document.getElementById("modal_content");
    while (myNode.firstChild) {
      myNode.removeChild(myNode.firstChild);
    }
  }

这是我的HTML：

<div class="row">
  <div class="column">
    <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="clearSlides(); closeModal();">&times;</span>
  <div class="modal-content" id="modal_content">

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

.modal-content div得到了这个js函数：

  function fillSlides(modalID){
    var container = document.getElementsByClassName("modal-content");

    var slides = {
      "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
      "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
      "3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
    };
    var modal_num = modalID.getAttribute('data-modal');
    //alert(slides[modal_num].length);

    for (var i = 0 ; i < slides[modal_num].length; i++) {
      var the_divs = document.createElement('div');
      var s_img = document.createElement('img');

      the_divs.className = 'mySlides';

      s_img.src = slides[modal_num][i];

      the_divs.appendChild(s_img);

      container[0].appendChild(the_divs);
    }
  }

如果需要进一步澄清，请告诉我。

Answer 1

根据评论，让您的控件在#modal_content之外使用innerHTML=''来清除其中的所有内容。

演示

＆＃13;

function clearSlides() {
  var content = document.getElementById('modal_content');

  content.innerHTML = '';
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

＆＃13;

<div class="row">
  <div class="column">
    <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <div class="close cursor" onclick="clearSlides(); closeModal();">&times;</div>
  <div class="modal-content" id="modal_content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" class="img">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" class="img">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" class="img">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" class="img">
    </div>

  </div>

</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

＆＃13;

Answer 2

由于您要在幻灯片中添加“mySlides”类，因此可以检查要删除的元素是否实际包含mySlides类。如果不是，则不应将其删除。

您也可以将按钮移动到单独的div。这将分离您的幻灯片和控件，以便您可以更自由地操作模态内容。

删除类中的所有元素除了两个锚标记

2 个答案:

演示