jqueryで同じクラスの次の要素をクリックして取得する

Question

次のように作成しようとしています。

私はボタンがあり、そのボタンをクリックすると、アクティブなクラスをdivに追加する必要がありますが、同じクラスの4つのdivがあります。何を作成しようとしているのは、最初の賭けを選択したボタンを最初にクリックしたとき、2回目の賭けをするとき、4つの賭けがあるときなどのChoose Betシステムのようなものです。

私のHTML構造は、私がこれまでjQueryを使って、それは2つの要素を取得している。このコードで

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

下に見たのは何

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

を下回っています。

どのように解決策を得ることができますか？

ありがとうございます。

Answer 1

だこと要件。 そして、divのcounter addクラスに基づいてカウンタを初期化します。 4回クリックするごとにカウンタが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

あなたを達成することができ:eq()を使用して、すべての:)

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>