点击jquery中的下一个元素

bqujaahr  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(156)

我试图创建以下内容。
我有一个按钮,单击该按钮时,我需要添加一些活动类到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');
    }
});

在这段代码中,它得到了两个元素。
有什么办法解决这个问题吗?

anhgbhbe

anhgbhbe1#

这里是一个解释,请参阅评论的细分。

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

sf6xfgos2#

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

vuktfyat3#

如果你有一个按钮…即:

<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
这就是全部:)

相关问题