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

【问题标题】：Get next element with same class in jquery on click单击时在jquery中获取具有相同类的下一个元素
【发布时间】：2017-02-01 09:44:25
【问题描述】：

我正在尝试创建以下内容。

我有一个按钮，单击该按钮我需要向 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 个元素。

知道如何解决这个问题吗？

提前致谢。

【问题讨论】：

nth-child()、eq() 或 nth-of-type() 不起作用吗？
但是我如何跟踪点击是第一次点击还是第二次点击并使用 eq()、nth-child() 等执行一些操作？
我建议您将其存储在 localStorage 或 sessionStogare 变量中
你能提供剩下的代码吗
@student 为什么你会在这种情况下浪费存储空间？

标签： javascript jquery next

【解决方案1】：

使用:eq() 可以实现您的要求。并初始化一个计数器并基于该计数器在 div 中添加类。每四次点击使计数器变为 0。

请检查这个sn-p。

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>

【讨论】：

是的，我明白了，工作完美@Rahul Patel。如果我有更多的块连接到这个，这个 sn-p 会起作用吗？如果选择了蓝色，其他部分也应该获得活动状态。
是的，让我做一个更正，它适用于动态 div。
@AnahitDEV 现在检查 sn-p。您可以添加任意数量的 div。如果这是唯一的问题，则恢复否决票。
我的意思是我在这个 game_paytable_columns 的顶部有另一个元素在单独的 div 中。所以我的意思是这个动作也可以应用于其他 div 吗？
是的。它适用于 dom 中类名为“game_paytable_redbet_column”的所有 div。

【解决方案2】：

这里是一个解释，请查看 cmets 了解详细信息。

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>

【讨论】：

谢谢@synthet1c。你的 sn-p 也很有帮助

【解决方案3】：

如果你有一个按钮......即：

<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

这就是:)

【讨论】：