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

Question

例如，您有三个按钮。根据您选择的按钮，一个 div 将出现在其下方，并带有另一个按钮子集，并继续这样。当你点击一个按钮时，它会变成黄色，并且一个“selected”类会出现在那个按钮上。但是可以说我已经加载了 div 1、div 2、div 3 和 div 4。但是我在 div 2 上选择了一个不同的按钮。我希望 div 4 消失并且基本上“重置”，并且 div 3 按钮的选择重置(就像在选择类中消失一样)。

下图:假设 btn 1 和 btn 4 被选中(黄色)，div 2 和 div 3 现在已加载。但我现在选择 btn 2，所以 selected(yellow) 显示在 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>