Obtenir l'élément suivant avec la même classe dans jquery sur click

Question

J'essaie de créer ce qui suit.

J'ai un bouton et sur un clic de ce bouton j'ai besoin d'ajouter une classe active à une div, mais j'ai 4 divs avec la même classe. Ce que j'essaie de créer est comme un système Choose Bet comme quand vous cliquez sur la première fois sur le bouton que vous choisissez le premier pari, quand la deuxième fois la seconde, j'ai 4 paris.

Ma structure html est ci-dessous

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

Ce que je l'ai fait jusqu'à présent avec jquery voir avec ce code ci-dessous

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'); 
    } 
}); 

il obtient 2 éléments.

Une idée de comment obtenir une solution à cela?

Merci d'avance.

Answer 1

En utilisant :eq() vous pouvez réaliser votre exigence. Et initialiser un compteur et basé sur le compteur ajouter une classe dans div. Et tous les quatre clics font le compteur 0.

Veuillez vérifier cet extrait.

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

Si vous avez un bouton ... à savoir:

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

Semble assez simple:

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

C'est tout :)

Answer 3

est ici une interprétation, s'il vous plaît voir les commentaires pour une ventilation.

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>