获取下一个元素在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

使用:eq()你可以实现你的需求。 并初始化一个计数器，并基于div中的counter add类。 并且每四次点击使计数器为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 2

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

<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 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>