Как изменить свойство CSS с помощью нажатия кнопки и идентификатора?

Question

У меня есть JSFIddle https://jsfiddle.net/rinku16/tfsrnj8y/21/, я все сделал правильно, но не знаю, где ошибка. Пожалуйста, поправьте меня. Вы можете получить весь мой код в JSFiddle.

Я хочу переместить кнопку фокуса на следующую и предыдущую кнопку (только 1,2,3 .... НЕ на предыдущую и следующую кнопку), основываясь на нажатии кнопки далее / предыдущий. Изначально это будет кнопка 0 оранжевого цвета, когда я нажму следующий, она перейдет на кнопку 1 цвета и тот же случай для предыдущей кнопки.

JS Код.

$(document).ready(function() {

$('#nextValue').click(function() {

    var x = $('.nav-numbers .btn :focus').filter(function () { 
        return this
      });

      $('#'+x).css({"background-color": ""});
      $('#'+x).next().css({"background-color": "#e67e22", "color": "#ffffff"});

});

$('#PreValue').click(function() {

    var x = $('.nav-numbers .btn :focus').filter(function () { 
    return this
  });

  $('#'+x).css({"background-color": ""});
  $('#'+x).prev().css({"background-color": "#e67e22", "color": "#ffffff"});

});

  $('.nav button').click(function() {

  /* var start = $(this).text() */;

  $(this).css({"background-color": "#e67e22", "color": "#ffffff"});


});

$('.nav button')[0].click()


});

Спасибо

Answer 1

Проблема заключается в этой строке кода.

    var x = $('.nav-numbers .btn :focus').filter(function () { 
        return this
    });

Это в основном возвращает пустой объект. Состояние «Фокус» вызывается только тогда, когда элемент (например, ввод формы) получил фокус. Обычно он срабатывает, когда пользователь щелкает или нажимает на элемент или выбирает его клавишей «tab» на клавиатуре. Вы можете прочитать больше об этом здесь (https://developer.mozilla.org/en-US/docs/Web/CSS/: focus ).

Я предоставил вам простой пример здесь https://jsfiddle.net/gu81cbkm/.