Question

我正在尝试让我的滑块在正在进行的测试中具有交互性，但我无法弄清。我有一些W3所利用的代码，但我试图为按钮添加几个事件，因此它们全部在自己的javascript文件中，而不是嵌入HTML中。

这是HTML：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="./image_1.jpg" style="width:100%">
  <img class="mySlides" src="./image_2.jpg" style="width:100%">
  <img class="mySlides" src="./image_3.jpg" style="width:100%">

  <button id="clicker" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

这是Javascript：

let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  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";  
}

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;

当脚本嵌入到hmtl中时，滑块起作用了，但是当我尝试为自己的javascript文件中的按钮编写一些功能时，它就停止工作了，我现在很困惑。我将它们添加到他们自己的变量中，并抓住了它的html选择器，因此我可以依次添加一个事件处理程序并将其链接到该函数，但它不起作用。任何帮助，将不胜感激。

此外，这是我的第一篇帖子，如果我没有正确设置其格式，我们深表歉意。

TIA，尼尔。

Answer 1

最有可能是2 x id="clicker"引起的问题。将unique ids用于按钮应该可以解决问题。

接下来，由于slideIndex是全局声明的，因此不需要plusDivs中间件。

我也建议使用更清晰的函数和变量名称，以提高可读性。检查以下各项：slideDivs vs showDivs，step vs n，slides vs x，依此类推。听起来好像不大按照给定的示例进行操作，但这是一个好习惯，在进行较大的项目时会为您节省很多时间。

还有一些较小的优化可能，例如在一个循环中更改可见性，以及将幻灯片缓存在滑动功能之外，以避免在每次单击时再次选择它。检查摘录的建议重写代码。

var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

function slideDivs(step) {
    visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
    for (let index = 0; index < slides.length; index++) {
        slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
    }
}

document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
	<img class="mySlides" src="./image_1.jpg" style="background-color: red;">
	<img class="mySlides" src="./image_2.jpg" style="background-color: green;">
	<img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
  
	<button id="slideLeftBtn" class="w3-button w3-black w3-display-left">&#10094;</button>
	<button id="slideRightBtn" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

Answer 2

您有多个问题：

首先，选择按钮。您要尝试获得具有相同ID的2个按钮，则必须进行更改。

然后，这两行：

jest.fn()

let slideForward = plusDivs(1); let slideBack = plusDivs(-1);和plusDivs(1)正在调用该函数并返回值。要解决此问题，您可以创建一个匿名函数（或箭头函数）来调用plusDivs(-1)

这是固定版本（我将图片的宽度更改为25％，因此在摘要中更容易看到）：

plusDivs

let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  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";  
}


leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);

Answer 3

您不能有两个完全相同的ID，因此我给按钮分配了单独的ID，然后使用addEventListener将事件监听器附加到每个监听器上。在每个侦听器内部，我直接在其中添加了plusDivs()函数。

let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  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";  
}

leftSlideButton.addEventListener("click",  () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});

.w3-content > img{
   max-height: 200px;
   object-fit: contain;
   background-color: lightblue;
}

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">

  <button id="clicker-left" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker-right" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

如何获得此按钮以触发适当的事件

3 个答案: