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

Question

我为我的视频创建了导航按钮，某种时间戳允许用户在点击时跳转到视频中的特定时刻。只要单击按钮并且 video.currentTime 的值在特定范围内，按钮就会改变颜色。当一个按钮是红色时，其余的当然必须是白色的。

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

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

javascript 的重要部分在 //VIDEO NAV BUTTON FUNCTION header 下。我只是想知道是否有任何方法可以摆脱 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 更改文本颜色

JavaScript: Change text color depending on video.currentTime

javascript

video

controls

timestamp