Question

在我的项目中，我有一个带有视频的HTML，在我添加带有活动类的部件之前，它们的效果很好。我看不出哪里有错误:(视频工作正常，但我总是会误以为按钮容器为0 ...我会非常感激任何帮助，因为我在这方面是新手，而且我为我制作项目期末考试。这只是预先的脚本代码..thnx

window.onload = function() {

  const vid = document.getElementById('player');

  document.getElementById('play').onclick = function() {
    vid.play();
  };

  document.getElementById('pause').onclick = function() {
    vid.pause();
  };
  document.getElementById('full').onclick = function() {
    vid.requestFullscreen(); // Playback-Head-Position in Sekunden

  };

  const links = document.querySelectorAll('a.linkVideo');

  for (let i = 0; i < links.length; i++) {
    links[i].onclick = function(e) {
      e.preventDefault();

      vid.src = 'video/' + this.dataset.vid + '.mp4';
    }
  }
}

var btnContainer = document.getElementById("myDIV");
var btns = btnContainer.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}

     <body>
    <main>

     </video>
     <div class="myDIV">
      <button class="button" id="play">Play</button>
      <button class="button" id="pause">Pause</button>
      <button class="button" id="full">Full Screen</button>
     <p id="ausgabe"></p>
     </div>
     <div id="videos">
      <a href="#" data-vid="vid01" class="linkVideo">Excersise Video 1</a>
      <a href="#" data-vid="vid02" class="linkVideo">Excersise Video 2</a>
      <a href="#" data-vid="vid03" class="linkVideo">Excersise Video 3</a>
    </div>
    </main>
    </body>

Answer 1

在if语句中将其设置为0，它必须为i

if (current.length > 0) {
   current[i].className = current[i].className.replace(" active", "");
}

为活动元素添加类

1 个答案: