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

WORKING DEMO

全是:)

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>

单击jquery中获取具有相同类的下一个元素

3 个答案: