javascript - 如何在 JavaScript 中一次调用两个函数？

Question

我有这两个函数，它们具有非常相似的代码和几乎相同的变量名。我想同时运行它们，但只有一个在运行。

函数如下:

function showSlides(n) {
  var i;

  var slides = document.getElementsByClassName("mySlides0");

  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = slides.length}    
  if (n < 1) {slideIndex = 1}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";

    }


    ////////////////////////
    function showSlides1(n) {
    var i;

  var slides = document.getElementsByClassName("mySlides1");

  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = slides.length}    
  if (n < 1) {slideIndex = 1}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";

}

这是我运行它的方式:

showSlides1(slideIndex1);
showSlides(slideIndex);

Answer 1

首先，如评论中所述，您不需要相同的函数，只需具有不同的className，您可以通过参数传递它。

第二件事是您忘记将 n 参数分配给 slideIndex。第三件事是您搜索了文档中的所有点。您应该只搜索 slider 中的内容。

我已经为您的代码准备了一个工作示例，其中包含一些 HTML 和 CSS。

function showSlides(n, className) {
  var i;

	var slider = document.getElementsByClassName(className)[0];
  var slides = slider.getElementsByClassName('slide');
  var dots = slider.getElementsByClassName("dot");
  var slideIndex = 0;
  
  if (n > slides.length) {slideIndex = slides.length}    
  else if (n < 1) {slideIndex = 1}
  else {slideIndex = n}
  
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";

    }


showSlides(2, 'first-slider');
showSlides(3, 'second-slider');

.first-slider,
.second-slider {
  display: inline-block;
  width: 100px;
}
.slide {
  color: blue;
}

.dot {
  display: inline-block;
  padding: 3px 4px;
  border-radius: 50%;
  background: grey;
}
.dot.active {
  color: red;
}

<div class="first-slider">
  <div class="slide">
     1
  </div>
  <div class="slide">
     2
  </div>
  <div class="slide">
     3
  </div>
  <div class="slide">
     4
  </div>
  <div class="slide">
     5
  </div>
  <div class="dots">
    <div class="dot">
    1
    </div>
    <div class="dot">
    2
    </div>
    <div class="dot">
    3
    </div>
    <div class="dot">
    4
    </div>
     <div class="dot">
    5
    </div>
    
  </div>
</div>
<div class="second-slider">
  <div class="slide">
     1
  </div>
  <div class="slide">
     2
  </div>
  <div class="slide">
     3
  </div>
  <div class="slide">
     4
  </div>
  <div class="slide">
     5
  </div>
  <div class="dots">
    <div class="dot">
    1
    </div>
    <div class="dot">
    2
    </div>
    <div class="dot">
    3
    </div>
    <div class="dot">
    4
    </div>
     <div class="dot">
    5
    </div>
    
  </div>
</div>