单击时获取 jquery 中具有相同 class 的下一个元素

Question

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

我有一个按钮，单击该按钮后我需要将一些活动的 class 添加到 div，但我有 4 个 div 具有相同的 class ].我试图创建的就像一个选择投注系统，当你第一次点击按钮时，你选择了第一个投注，当第二次点击第二个时，我有 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

如果你有一个按钮...即：

<button onclick="next()" >NEXT</button>

看起来很简单：

// get all elements with class game_paytable_column
var columns = document.getElementsByClassName("game_paytable_column");

// counter to control the actual index
var counter = 0;

function next() {
    // this selects the actual element and shows content
    alert(columns[counter].innerHTML);

    //and passes to next element
    if (counter == columns.length - 1)
        counter = 0;
    // first if necessary
    else
        counter ++;
}

WORKING DEMO

就这些了:)

Answer 2

使用:eq()你可以达到你的要求。并初始化一个计数器，并根据计数器在div中添加class。每点击四次，计数器就会变为 0。

请检查此代码段。

var _click = 0;
$('.choose_bet_button').click(function(){  
  if((_click % $(".game_paytable_column").length)==0){_click=0;}  

  $('.game_paytable_column').removeClass('active_blue_bet'); 
  $('.game_paytable_column:eq('+_click+')').addClass('active_blue_bet');
  
  _click++;
  if($.trim($(".in_sight_area").html())==""){
    $(".in_sight_area").html('<div class="top_bet_column_two top_bet_column game_paytable_column">New One</div>');
  }
});

.active_blue_bet{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="in_sight_area"></div>

<div class="game_paytable_bluebet_column game_paytable_column">1</div>
<div class="three_bet_wrappaer">
  <div class="game_paytable_greenbet_column game_paytable_column">2</div>
  <div class="game_paytable_orangebet_column game_paytable_column">3</div>
  <div class="game_paytable_redbet_column game_paytable_column">4</div>
</div>
<br/>
<button class="choose_bet_button">Choose Bet</button>

<div class="game_paytable_redbet_column game_paytable_column">5</div>

Answer 3

这里有解读，具体看评论。

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>

单击时获取 jquery 中具有相同 class 的下一个元素

Get next element with same class in jquery on click

javascript

jquery

next