在按钮选择下方隐藏和显示div +类更改

Question

例如，您有三个按钮。根据您选择的按钮，div下方将显示另一个按钮子集，并继续这样。单击按钮后，它将变为黄色，并且该按钮上将显示“已选择”类。但是，假设我已经加载了div 1，div 2，div 3和div 4。但我在div 2上选择了一个不同的按钮。我希望div 4消失并基本上“重置”，并且div 3按钮的选择重置（如在选择类中消失）。

下面：假设选择了btn 1和btn 4（黄色），现在加载div 2和div 3。但我现在选择btn 2，所以选中（黄色）显示超过btn 2，而不是btn 1.我需要div 3消失而div 2重置没有任何“选择”类。基本上重置div 2（你选择的按钮下方的div和下面的所有div。）

我希望这更有意义。如果我需要进一步澄清，请告诉我。

HTML示例

$(".div2, .div3, .div4, .div5").hide();

$('.btn1, .btn2, .btn3 ').click(function() {
  $('.div2').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn4, .btn5, .btn6 ').click(function() {
  $('.div3').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn7, .btn8, .btn9 ').click(function() {
  $('.div4').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn10, .btn11, .btn12 ').click(function() {
  $('.div5').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

.btn {
  color:grey;
}
.selected {
  color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 div1">
    <button class="btn1 btn"><label for="btn1">Btn1</label></button>
    <button class="btn2 btn"><label for="btn2">Btn2</label></button>
    <button class="btn3 btn"><label for="btn3">Btn3</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div2">
    <button class="btn4 btn"><label for="btn4">Btn4</label></button>
    <button class="btn5 btn"><label for="btn5">Btn5</label></button>
    <button class="btn6 btn"><label for="btn6">Btn6</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div3">
    <button class="btn7 btn"><label for="btn7">Btn7</label></button>
    <button class="btn8 btn"><label for="btn8">Btn8</label></button>
    <button class="btn9 btn"><label for="btn9">Btn9</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div4">
    <button class="btn10 btn"><label for="btn10">Btn10</label></button>
    <button class="btn11 btn"><label for="btn11">Btn11</label></button>
    <button class="btn12 btn"><label for="btn12">Btn12</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div5"></div>
</div>

Answer 1

您需要前往.row，然后使用nextAll获取其他.row。然后找到要隐藏的div，然后在其中找到button以删除该类。

然后执行类似的操作以显示next div。

$(".div2, .div3, .div4, .div5").hide();

$('button').click(function(){
  $(this).addClass('selected').siblings().removeClass(); 
  $(this).closest('.row').nextAll('.row').find('div').hide().find('button').removeClass('selected');
  $(this).closest('.row').next('.row').find('div').show();
});

.btn {
  color:grey;
}
.selected {
  color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 div1">
    <button class="btn1 btn"><label for="btn1">Btn1</label></button>
    <button class="btn2 btn"><label for="btn2">Btn2</label></button>
    <button class="btn3 btn"><label for="btn3">Btn3</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div2">
    <button class="btn4 btn"><label for="btn4">Btn4</label></button>
    <button class="btn5 btn"><label for="btn5">Btn5</label></button>
    <button class="btn6 btn"><label for="btn6">Btn6</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div3">
    <button class="btn7 btn"><label for="btn7">Btn7</label></button>
    <button class="btn8 btn"><label for="btn8">Btn8</label></button>
    <button class="btn9 btn"><label for="btn9">Btn9</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div4">
    <button class="btn10 btn"><label for="btn10">Btn10</label></button>
    <button class="btn11 btn"><label for="btn11">Btn11</label></button>
    <button class="btn12 btn"><label for="btn12">Btn12</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div5"></div>
</div>

Answer 2

以通用方式回答很难，但这段代码将完全符合您的要求。通用方式需要更多时间。

$(".div2, .div3, .div4, .div5").hide();

$('.btn1, .btn2, .btn3 ').click(function() {
  $('.div2').fadeIn("slow").find('.btn').removeClass('selected');
  $('.div3, .div4').fadeOut('slow');
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn4, .btn5, .btn6 ').click(function() {
  $('.div3').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn7, .btn8, .btn9 ').click(function() {
  $('.div4').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

$('.btn10, .btn11, .btn12 ').click(function() {
  $('.div5').fadeIn("slow");
  $(this).addClass('selected').siblings().removeClass('selected');
});

.btn {
  color:grey;
}
.selected {
  color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 div1">
    <button class="btn1 btn"><label for="btn1">Btn1</label></button>
    <button class="btn2 btn"><label for="btn2">Btn2</label></button>
    <button class="btn3 btn"><label for="btn3">Btn3</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div2">
    <button class="btn4 btn"><label for="btn4">Btn4</label></button>
    <button class="btn5 btn"><label for="btn5">Btn5</label></button>
    <button class="btn6 btn"><label for="btn6">Btn6</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div3">
    <button class="btn7 btn"><label for="btn7">Btn7</label></button>
    <button class="btn8 btn"><label for="btn8">Btn8</label></button>
    <button class="btn9 btn"><label for="btn9">Btn9</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div4">
    <button class="btn10 btn"><label for="btn10">Btn10</label></button>
    <button class="btn11 btn"><label for="btn11">Btn11</label></button>
    <button class="btn12 btn"><label for="btn12">Btn12</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div5"></div>
</div>