獲取下一個元素在jquery中的同一類在點擊

我有一個按鈕，並點擊該按鈕，我需要添加一些活躍的類到一個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個元素。

任何想法如何得到這個解決方案？

在此先感謝。

來源

2016-09-23 Anahit DEV

不'第n個孩子（）'，'EQ（）'或'n次的類型（）'的作品？ – xameeramir

，但我怎麼跟蹤點擊就像是第一次點擊或第二次點擊，並與eq（），nth-child（）等做一些行動？ –

我建議你將它存儲在'localStorage'或'sessionStogare'變量中 – xameeramir

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

來源

2016-09-23 13:57:03

是的，我明白了，完美的作品@Rahul Patel。如果我有一個更多的塊連接到這個樣子，如果選擇了藍色，其他一塊也應該處於活動狀態，這個片段是否會工作？ –

是的，讓我做一個更正，它將動態div正常工作。 –

@AnahitDEV現在檢查片段。你可以添加多達你想要的div。如果這是唯一的問題，則還原該投票。 –

如果你有一個按鈕...即：

<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

這是所有:)

來源

2016-09-23 13:51:28

是啊，太棒了，謝謝你的工作示例 –

這裏有一個解釋，請參閱細分的意見。

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>

來源

2016-09-23 14:19:34 synthet1c

謝謝@ synthet1c。你的片段也很有幫助 –

獲取下一個元素在jquery中的同一類在點擊

回答

相關問題