JavaScript: изменить цвет текста в зависимости от video.currentTime

Question

Я создал навигационные кнопки для своего видео, своего рода временные метки, которые позволяют пользователю переходить к определенному моменту видео в клике.Кнопки меняют свой цвет при каждом нажатии, а значение video.currentTime находится в определенном диапазоне.Когда одна кнопка красная, остальные должны быть белого цвета.

Взгляните на мой кодовый блок: https://codepen.io/anon/pen/VRZPEP

Мое решение работает.Однако я чувствую, что это слишком сложно, и эту функцию можно сделать намного проще и с меньшим количеством кода.

Важный бит JavaScript находится под заголовком // ФУНКЦИЯ КНОПКИ VIDEO NAV.Мне просто интересно, есть ли способ избавиться от функции 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

Вы можете объединить логику в прослушивателе 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";
      }
    }
  }
}

Answer 2

Вы можете немного упростить это, переименовав 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]);