Question

我为我的视频创建了导航按钮，这些时间戳使用户可以在点击时跳到视频中的特定时刻。只要单击按钮，它们的颜色就会改变，并且video.currentTime的值在特定范围内。当一个按钮为红色时，其余按钮必须为白色。

看看我的codepen：https://codepen.io/anon/pen/VRZPEP

我的解决方案确实有效。但是，我觉得它太复杂了，可以用更少的代码来简化功能。

javascript的重要位在// VIDEO NAV BUTTON FUNCTION标头下。我只是想知道是否有什么方法可以摆脱changeToWhite（）函数？例如，通过某种方法，仅当video.currentTime发现自己在特定范围内时，才将按钮变为红色？

var DOMstrings = {

nav_btn: document.querySelector('.navbar-button'),
nav_btn_mobile: document.querySelector('.navbar-toggler'), 
nav_list: document.querySelector('#wrapper-for-list'), 
//video
video: document.querySelector('#myVideo'), 
//video-nav-buttons
nav_btn_1: document.querySelector('.video-nav h1:nth-child(1)'),
nav_btn_2: document.querySelector('.video-nav h1:nth-child(2)'), 
nav_btn_3: document.querySelector('.video-nav h1:nth-child(3)'), 
nav_btn_4: document.querySelector('.video-nav h1:nth-child(4)'), 
nav_btn_5: document.querySelector('.video-nav h1:nth-child(5)')

}

//视频导航按钮功能

var navigateVideo = function() {

    var video_nav = [DOMstrings.nav_btn_1, DOMstrings.nav_btn_2, DOMstrings.nav_btn_3, DOMstrings.nav_btn_4, DOMstrings.nav_btn_5]

    var setTime = function(time) {

        DOMstrings.video.currentTime = time;
    };

    var changeToWhite = function() {

        video_nav.forEach(function(cur) {

            cur.style.color = "white";
        });
    };

    DOMstrings.video.addEventListener('timeupdate', function() {

        var cur = DOMstrings.video.currentTime;

        if (cur >= 0 && cur < 5) {
            changeToWhite();
            DOMstrings.nav_btn_1.style.color = "red";
        } else if (cur > 5 && cur < 10) {
            changeToWhite();
            DOMstrings.nav_btn_2.style.color = "red";
        } else if (cur > 10 && cur < 15) {
            changeToWhite();
            DOMstrings.nav_btn_3.style.color = "red";
        } else if (cur > 15 && cur < 20) {
            changeToWhite();
            DOMstrings.nav_btn_4.style.color = "red";
        } else if (cur > 25) {
            changeToWhite();
            DOMstrings.nav_btn_5.style.color = "red";
        } 

    });

    DOMstrings.nav_btn_1.addEventListener('click', function(e) {
        setTime(0);
        changeToWhite();
        e.target.style.color = "red";
    });
    DOMstrings.nav_btn_2.addEventListener('click', function(e) {
        setTime(15);
        changeToWhite();
        e.target.style.color = "red";
    });
    DOMstrings.nav_btn_3.addEventListener('click', function(e) {
        setTime(30);
        changeToWhite();
        e.target.style.color = "red";
    });
    DOMstrings.nav_btn_4.addEventListener('click', function(e) {
        setTime(45);
        changeToWhite();
        e.target.style.color = "red";
    });
    DOMstrings.nav_btn_5.addEventListener('click', function(e) {
        setTime(60);
        changeToWhite();
        e.target.style.color = "red";
    });
};

Answer 1

您可以通过将changeToWhite()重命名为changeToRed(button)来简化此操作：

const changeToRed = (button) => {
  video_nav.forEach(cur => {
    button.style.color = (cur === button) ? 'red' : 'white';
  })
}

然后在调用每个按钮时将其传递：

changeToRed(DOMstrings.nav_btn_1);

// Previously:
// changeToWhite();
// DOMstrings.nav_btn_1.style.color = "red";

其他一些事情：您可以制作一个仅需几秒钟即可完成的功能，而不必重复执行同一功能5次：

function handleClick(seconds) {
  return function(e) {
    setTime(seconds);
    changeToRed(e.target);
  }
}

DOMstrings.nav_btn_1.addEventListener('click', handleClick(0));
DOMstrings.nav_btn_2.addEventListener('click', handleClick(15));
DOMstrings.nav_btn_3.addEventListener('click', handleClick(30));
...etc

您也可以通过执行以下操作来摆脱if / else块：

const cur = DOMstrings.video.currentTime;
// Divide the current time by 5 and round down, so 0-4 seconds
// would use index 0 (nav_btn_1), 5-9 seconds would use index
// 1 (nav_btn_2), etc
const buttonIndex = Math.floor(cur / 5);
changeToRed(video_nav[buttonIndex]);

Answer 2

您可以在timeUpdate侦听器中合并逻辑，还可以通过在按钮的父元素上将所有侦听器替换为单个单击侦听器来消除单击侦听器中的大量重复。（这是由于事件冒泡而起作用。）总的来说，它可能看起来像：

// Selectors
const video = document.querySelector("#myVideo");
const videoNav = document.querySelector(".video-nav");
const buttons = document.querySelectorAll(".video-nav button");

//Bindings
video.addEventListener("timeupdate", updateTime);
videoNav.addEventListener("click", conditionallySetTime);


//Listeners

function updateTime(event){
  const time = event.target.time;
  buttons.forEach(function(button, index){
    button.style.color = index == Math.floor(time/15) ? "red" : "white"
  });
}

function conditionallySetTime(event){
  if(event.target.tagName == button){ // Now we care about this click
    buttons.forEach(function(button, index){
      if(event.target == button){
        button.style.color = "red";
        setTime(index * 15); // If 1st button is 0, 2nd is 15, etc.
      }
      else { 
        button.style.color = "white";
      }
    }
  }
}

JavaScript：根据video.currentTime更改文本颜色

2 个答案: