Получить следующий элемент с тем же классом в jquery при щелчке

Question

Я пытаюсь создать следующее.

У меня есть кнопка, и при нажатии этой кнопки мне нужно добавить активный класс в div, но у меня есть 4 divs с тем же классом. То, что я пытаюсь создать, похоже на систему «Выбрать ставку», например, когда вы нажимаете первый раз на кнопке, вы выбираете первую ставку, когда второй раз второй, у меня 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. И каждые четыре щелчка сделайте счетчик 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>