javascript - 如何使用按钮单击和ID更改CSS属性？

我有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()


});

谢谢

最佳答案

问题出在这行代码上。

    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/处为您提供了一个简单的示例。