javascript - 单击时在 jquery 中获取具有相同类的下一个元素

Question

我正在尝试创建以下内容。

我有一个按钮，单击该按钮我需要将一些事件类添加到一个 div，但我有 4 个具有相同类的 div。我试图创建的就像一个选择投注系统，当你第一次点击按钮时，你选择了第一个投注，当第二次点击第二个时，我有 4 个投注。

我的html结构如下

<div class="game_paytable_bluebet_column game_paytable_column"></div>
<div class="three_bet_wrappaer">
     <div class="game_paytable_greenbet_column game_paytable_column"></div>
     <div class="game_paytable_orangebet_column game_paytable_column"></div>
     <div class="game_paytable_redbet_column game_paytable_column"></div>
</div>

到目前为止我用 jquery 做了什么，见下文

jQuery('.choose_bet_button').click(function(){
    if(!jQuery('.game_paytable_column:first').hasClass('active_blue_bet')){
        jQuery('.game_paytable_column:first').addClass('active_blue_bet');
    }else{
        jQuery('.game_paytable_column:first').removeClass('active_blue_bet');
        jQuery('.game_paytable_column').next().addClass('active_blue_bet');
    }
});

通过这段代码，它获得了 2 个元素。

知道如何解决这个问题吗？

提前致谢。

Answer 1

这里有一个解释，请看评论中的细目。

jQuery('.choose_bet_button').click(function(){
  // get all the elements that match your selector
  var $columns = $('.game_paytable_column')
  // get the currently active element
  var $active = $columns.filter('.active_blue_bet')
  // get the index of the active element relative to your columns
  var index = $active.length ? $columns.index($active) : -1
  // increment the index if there is a next element or reset to 0
  var newIndex = ($columns.length > index + 1)
    ? index + 1
    : 0
  
  // remove the active class from all elements
  $columns.removeClass('active_blue_bet')
  // set the new active column
  $columns.eq(newIndex).addClass('active_blue_bet')
});

.game_paytable_column {
  width: 100%;
  height: 40px;
  margin: 4px;
  background: #eee;
}

.active_blue_bet {
  background: #bada55; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game_paytable_bluebet_column game_paytable_column active_blue_bet"></div>
<div class="three_bet_wrappaer">
     <div class="game_paytable_greenbet_column game_paytable_column"></div>
     <div class="game_paytable_orangebet_column game_paytable_column"></div>
     <div class="game_paytable_redbet_column game_paytable_column"></div>
</div>
<button class="choose_bet_button">choose</button>