Question

我正在尝试将此功能应用于多个项目，并且我不想重复。我如何在Vanilla JS中做到这一点？请参见下面的代码。

let slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  let i;
  let x = document.getElementsByClassName("slides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  document.getElementsByClassName("pagination")[0].innerText = slideIndex + ' / ' + x.length;
}

<div class="project1">
  <div class="pagination"></div>

  <div class="imgslide noselect">
    <div class="prev" onclick="plusDivs(-1)"></div>
    <div class="next" onclick="plusDivs(1)"></div>
    <img class="slides" src="img/project-1/Scan-4.jpg">
    <!-- <img class="slides" src="img/Scan-8.jpg"> -->
    <img class="slides" src="img/project-1/Scan-24.jpg">
    <img class="slides" src="img/project-1/Scan-35.jpg">
    <img class="slides" src="img/project-1/Scan-39.jpg">
    <img class="slides" src="img/project-1/Scan-40.jpg">
  </div>
</div>
<div class="project2">
  <div class="pagination"></div>

  <div class="imgslide noselect">
    <div class="prev" onclick="plusDivs(-1)"></div>
    <div class="next" onclick="plusDivs(1)"></div>
    <img class="slides" src="img/project-1/Scan-41.jpg">
    <!-- <img class="slides" src="img/Scan-8.jpg"> -->
    <img class="slides" src="img/project-1/Scan-22.jpg">
    <img class="slides" src="img/project-1/Scan-33.jpg">
    <img class="slides" src="img/project-1/Scan-38.jpg">
    <img class="slides" src="img/project-1/Scan-49.jpg">
  </div>
</div>

类别为project1和project2的细分应该分开，并且一旦单击该函数就可以更改图片。我想将相同的功能应用于多个项目，而不必每次都重写。

Answer 1

您应该获取适当项目document.getElementsByClassName("slides")的幻灯片，而不是获取所有幻灯片document.getElementById("projectN").getElementsByClassName("slides")。您必须同时更改两个函数，才能接受用于指定项目的另一个参数。

let projectIndexes = {
  project1: 1,
  project2: 1
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);

function plusDivs(project, n) {
  showDivs(project, projectIndexes[project] += n);
}

function showDivs(project, index) {
  let i;
  let x = document.getElementById(project).getElementsByClassName("slides");
  if (index > x.length) { index = 1 }
  if (index < 1) { index = x.length }
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
  }
  x[index - 1].style.display = "block";
  document.getElementById(project).getElementsByClassName("pagination")[0].innerText = index + ' / ' + x.length;
  projectIndexes[project] = index;
}

.slides {
  display: none;
}

<div id="project1">
    <div class="pagination"></div>

    <div class="imgslide noselect">
        <button class="prev" onclick="plusDivs('project1', -1)">Previous</button>
        <button class="next" onclick="plusDivs('project1', 1)">Next</button>
        <img class="slides" src="img/project-1/Scan-4.jpg" alt="project1 slide1">
        <img class="slides" src="img/project-1/Scan-24.jpg" alt="project1 slide2">
        <img class="slides" src="img/project-1/Scan-35.jpg" alt="project1 slide3">
        <img class="slides" src="img/project-1/Scan-39.jpg" alt="project1 slide4">
        <img class="slides" src="img/project-1/Scan-40.jpg" alt="project1 slide5">
    </div>
</div>
<br />
<div id="project2">
    <div class="pagination"></div>

    <div class="imgslide noselect">
        <button class="prev" onclick="plusDivs('project2', -1)">Previous</button>
        <button class="next" onclick="plusDivs('project2', 1)">Next</button>
        <img class="slides" src="img/project-1/Scan-41.jpg" alt="project2 slide1">
        <img class="slides" src="img/project-1/Scan-22.jpg" alt="project2 slide2">
        <img class="slides" src="img/project-1/Scan-33.jpg" alt="project2 slide3">
        <img class="slides" src="img/project-1/Scan-38.jpg" alt="project2 slide4">
        <img class="slides" src="img/project-1/Scan-49.jpg" alt="project2 slide5">
    </div>
</div>

Answer 2

我看到您有一个很好的答案，但是我将其添加为替代方法。

我建议对父级使用更通用的选择器的类，然后再使用该类。注意，我还在此处添加了选项，可以使用data-slide-index属性设置预定义的显示图像，然后将其设置为当前所选图像的值。例如，如果将其保存到Cookie中，则也可以从中恢复。

如果需要，您可以删除project1和project2类。

我还使用了data-direction，以便可以从标记中删除点击处理程序，而不必关心单击哪个按钮。

没有事件的标记会更整洁，使那里的组名更加通用
还原上次查看/第一个查看的视图（添加cookie或从后端）
使用了hidden类，并将其切换为显示/隐藏
内部使用了基于0的数字，因为数组基于0，使编码的维护更简单，但为普通人的显示添加了1。
重要的是，不使用全局变量

(function setup() {
  // add event listener to buttons
  let els = document.getElementsByClassName("project-container");
  for (let i = 0; i < els.length; i++) {
    let prevnext = els[i].getElementsByClassName("prevnext");
    for (let p = 0; p < prevnext.length; p++) {
      prevnext[p].addEventListener("click", plusMinusDivs, false);
    }
    //hide/show for each group, avoid this call by adding classes to markup
    showImage(els[i]);
  }
})();

function plusMinusDivs() {
  let parent = this.closest(".project-container");
  let slider = this.closest(".imgslide");
  let slideIndex = slider.dataset.slideIndex * 1;
  let nd = this.dataset.direction * 1;//*1 to avoid parse
  slideIndex = slideIndex += nd;
  let slides = parent.querySelectorAll(".slides");

  if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
  if (slideIndex < 0) {
    slideIndex = slides.length - 1;
  }
  slider.dataset.slideIndex = slideIndex + "";
  showImage(parent);
}

function showImage(parent) {
  let slides = parent.querySelectorAll(".slides");
  let len = slides.length;
  for (let s = 0; s < len; s++) {
    slides[s].classList.toggle("hidden", true);
  }
  let slider = parent.querySelector(".imgslide");
  let slideIndex = slider.dataset.slideIndex * 1;//*1 to avoid parse
  slides[slideIndex].classList.toggle("hidden", false);
  let pageText = (slideIndex + 1) + ' / ' + len;
  parent.querySelector(".pagination").innerText = pageText;
}

.hidden {
  display: none;
}

.prevnext {
  background-color: #AAEEDD;
}

<div class="project-container project1">
  <div class="pagination">&nbsp;</div>
  <div class="imgslide noselect" data-slide-index="0">
    <button class="prevnext prev" data-direction="-1">&lt;&lt;</button>
    <button class="prevnext next" data-direction="1">&gt;&gt;</button>
    <img class="slides" src="img/project-1/Scan-4.jpg" alt="4" />
    <img class="slides" src="img/project-1/Scan-24.jpg" alt="24" />
    <img class="slides" src="img/project-1/Scan-35.jpg" alt="35" />
    <img class="slides" src="img/project-1/Scan-39.jpg" alt="39" />
    <img class="slides" src="img/project-1/Scan-40.jpg" alt="40" />
  </div>
</div>
<div class="project-container project2">
  <div class="pagination">&nbsp;</div>
  <div class="imgslide noselect" data-slide-index="3">
    <button class="prevnext prev" data-direction="-1">&lt;&lt;</button>
    <button class="prevnext next" data-direction="1">&gt;&gt;</button>
    <img class="slides" src="img/project-1/Scan-41.jpg" alt="2-41" />
    <img class="slides" src="img/project-1/Scan-22.jpg" alt="2-42" />
    <img class="slides" src="img/project-1/Scan-33.jpg" alt="2-33" />
    <img class="slides" src="img/project-1/Scan-38.jpg" alt="2-38" />
    <img class="slides" src="img/project-1/Scan-49.jpg" alt="2-49" />
  </div>
</div>

如何使功能可重用？

2 个答案: