Question

如何将所有这些代码保留在变量中？我想在另一个地方调用此代码。我想在此幻灯秀菜单上添加一个click事件。如果我将所有这些代码编写在另一个click event函数中，将很容易。但是我不想这样做，我想通过使用变量在点击事件中调用所有这些代码

function change() {
  if (document.getElementsByClassName("sliderItems")[0].classList.contains("active")) {
    document.getElementsByClassName("sliderItems")[1].classList.add("active");
    document.getElementsByClassName("sliderItems")[0].classList.remove("active");
  } else if (document.getElementsByClassName("sliderItems")[1].classList.contains("active")) {
    document.getElementsByClassName("sliderItems")[2].classList.add("active");
    document.getElementsByClassName("sliderItems")[1].classList.remove("active");

  } else if (document.getElementsByClassName("sliderItems")[2].classList.contains("active")) {
    document.getElementsByClassName("sliderItems")[3].classList.add("active");
    document.getElementsByClassName("sliderItems")[2].classList.remove("active");

  } else if (document.getElementsByClassName("sliderItems")[3].classList.contains("active")) {
    document.getElementsByClassName("sliderItems")[4].classList.add("active");
    document.getElementsByClassName("sliderItems")[3].classList.remove("active");

  } else if (document.getElementsByClassName("sliderItems")[4].classList.contains("active")) {
    document.getElementsByClassName("sliderItems")[1].classList.add("active");
    document.getElementsByClassName("sliderItems")[4].classList.remove("active");
  }
}
setInterval(change, 2000);

Answer 1

我不确定您对代码的含义，我认为您的意思是sliderItems的数组，如果这是很简单的话。

var sliderItems = document.getElementsByClassName('sliderItems');

sliderItems[0].classList.add('active');

使用变量存储DOM元素的最大优点是，比每次使用它都要搜索元素都要好。

Answer 2

只需将setInterval(change, 2000)分配给变量并使用它

添加到脚本

var listenChange = setInterval(change, 2000)

在html中使用它

<button onclick="listenChange()">Button1</Button>

我如何将所有这些代码存储在变量中

2 个答案: