我有一个addEventListener和一个For循环的问题

Question

我想做一个视频滑块。问题是，循环只对每个按钮起作用，但console.log会在单击时继续起作用。视频是在一个For循环中使用vimeo api在php中生成的。

当我第一次点击右键时，它工作了一次，如果我重试，它就死了。如果我在点击右边的按钮后点击左边的按钮，它会工作一次，但它跳过一个视频，并在左边跳过2个视频。

单击右侧按钮，然后单击左侧按钮后，网页中的HTML：

​

​

这是我的php代码：

$CLIENT_IDENTIFIER = "{CLIENT_IDENTIFIER}";
$CLIENT_SECRET = "{CLIENT_SECRET}";
$ACCESS_TOKEN = "{ACCESS_TOKEN}";
$CLIENT_ID = "{CLIENT_ID}";
require 'vendor/autoload.php';
use Vimeo\Vimeo;
$client = new Vimeo($CLIENT_IDENTIFIER, $CLIENT_SECRET, $ACCESS_TOKEN);
 
$response = $client->request('/users/{CHANNEL}/videos?sort=date&direction=desc', array(), 'GET');
for ($i=0; $i < 7; $i++) {
  $lien = $response["body"]["data"][$i]["uri"];
  $video_id = substr($lien, 8);
  echo '<div class="videos video-'.$i.'">
  <iframe title="vimeo-player" src="https://player.vimeo.com/video/'.$video_id.'?" width="720" height="480" frameborder="0"       allowfullscreen></iframe>
  </div>';
}

下面是我的JS代码：

var videos = document.querySelectorAll(".videos");

next.addEventListener("click", function() {
    for (let i=0; i<7; i++) {
        videos[i].classList.remove("video"+[i]);
        videos[i].classList.add("video"+[i-1]);
        console.log(videos[i])
    }
});

prev.addEventListener("click", function() {
    for (let i=0; i<7; i++) {
        videos[i].classList.remove("video"+[i]);
        videos[i].classList.add("video"+[i+1]);
        console.log(videos[i])
    }
});

我不知道为什么它不能工作，我希望你有一个解决方案！

Answer 1

好吧，这是有点长，但它是有效的。

我使用的JS代码：

let prev = document.querySelector(".group1-Prev");
let next = document.querySelector(".group1-Next");
let slider = document.querySelector("#slider");

var videos = document.querySelectorAll(".videos");

let video0 = document.querySelector(".video0");
let video1 = document.querySelector(".video1");
let video2 = document.querySelector(".video2");
let video3 = document.querySelector(".video3");
let video4 = document.querySelector(".video4");
let video5 = document.querySelector(".video5");
let video6 = document.querySelector(".video6");

let id0 = 0;
let id1 = 1;
let id2 = 2;
let id3 = 3;
let id4 = 4;
let id5 = 5;
let id6 = 6;

next.addEventListener("click", function() {

    video0.classList.remove("video"+id0);
    video0.classList.add("video"+Number(id0-1));

    video1.classList.remove("video"+id1);
    video1.classList.add("video"+Number(id1-1));

    video2.classList.remove("video"+id2);
    video2.classList.add("video"+Number(id2-1));

    video3.classList.remove("video"+id3);
    video3.classList.add("video"+Number(id3-1));

    video4.classList.remove("video"+id4);
    video4.classList.add("video"+Number(id4-1));

    video5.classList.remove("video"+id5);
    video5.classList.add("video"+Number(id5+-1));

    video6.classList.remove("video"+id6);
    video6.classList.add("video"+Number(id6-1));

    id0 = Number(id0-1);
    id1 = Number(id1-1);
    id2 = Number(id2-1);
    id3 = Number(id3-1);
    id4 = Number(id4-1);
    id5 = Number(id5-1);
    id6 = Number(id6-1);

});

prev.addEventListener("click", function() {

    video0.classList.remove("video"+id0);
    video0.classList.add("video"+Number(id0+1));

    video1.classList.remove("video"+id1);
    video1.classList.add("video"+Number(id1+1));

    video2.classList.remove("video"+id2);
    video2.classList.add("video"+Number(id2+1));

    video3.classList.remove("video"+id3);
    video3.classList.add("video"+Number(id3+1));

    video4.classList.remove("video"+id4);
    video4.classList.add("video"+Number(id4+1));

    video5.classList.remove("video"+id5);
    video5.classList.add("video"+Number(id5+1));

    video6.classList.remove("video"+id6);
    video6.classList.add("video"+Number(id6+1));

    id0 = Number(id0+1);
    id1 = Number(id1+1);
    id2 = Number(id2+1);
    id3 = Number(id3+1);
    id4 = Number(id4+1);
    id5 = Number(id5+1);
    id6 = Number(id6+1);

});

谢谢你的帮助!