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

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";
      }
    }
  }
}