点击获取与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

这是一种解释，请查看注释以获取细分。

 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> 

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 ++;
}

工作演示

仅此:)

Answer 3

使用: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>