Javascript 隐藏并显示按钮选择下方的div+；换班

例如，您有三个按钮。根据您选择的按钮，一个div将显示在它下面，其中包含另一个按钮子集，并继续这样操作。当你点击一个按钮时，它将变为黄色，并且一个类“selected”将显示在该按钮上。但是，假设我已经加载了div1、div2、div3和div4。但是我在第2部分选择了一个不同的按钮。我希望div4消失，本质上是“重置”，div3按钮的选择重置（就像在选择类中消失一样）

下面：假设选择了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'）。单击（函数（）{
$（'.div2'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn4、.btn5、.btn6'）。单击（函数（）{
$（'.div3'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn7、.btn8、.btn9'）。单击（函数（）{
$（'.div4'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn10.btn11.btn12'）。单击（函数（）{
$（'.div5'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
.btn{
颜色：灰色；
}
.选定{
颜色：黄色；
}

Btn1
Btn2
Btn3
Btn4
Btn5
Btn6
Btn7
Btn8
Btn9
Btn10
Btn11
Btn12
很难用一般的方式回答，但这段代码将完全满足您的要求。通用方法需要更多的时间


$（“.div2.div3.div4.div5”）.hide（）；
$（'.btn1、.btn2、.btn3'）。单击（函数（）{
$（'.div2'）.fadeIn（“慢”）.find（'.btn'）.removeClass（'selected'）；
$（'.div3，.div4'）.fadeOut（'slow'）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn4、.btn5、.btn6'）。单击（函数（）{
$（'.div3'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn7、.btn8、.btn9'）。单击（函数（）{
$（'.div4'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
$（'.btn10.btn11.btn12'）。单击（函数（）{
$（'.div5'）.fadeIn（“慢”）；
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
});
.btn{
颜色：灰色；
}
.选定{
颜色：黄色；
}

Btn1
Btn2
Btn3
Btn4
Btn5
Btn6
Btn7
Btn8
Btn9
Btn10
Btn11
Btn12
您需要转到
.row
，然后使用
nextAll
获取另一个
.row
。然后找到要隐藏的
div
，然后找到其中包含的
按钮以删除该类

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


$（“.div2.div3.div4.div5”）.hide（）；
$（“按钮”）。单击（函数（）{
$（this.addClass（'selected'）.sides（）.removeClass（）；
$（this）.closest（'.row'）.nextAll（'.row'）.find（'div'）.hide（）.find（'button'）.removeClass（'selected'）；
$（this）.closest（'.row'）.next（'.row'）.find（'div'）.show（）；
});
.btn{
颜色：灰色；
}
.选定{
颜色：黄色；
}

Btn1
Btn2
Btn3
Btn4
Btn5
Btn6
Btn7
Btn8
Btn9
Btn10
Btn11
Btn12
而不是
。单击
，您可能希望使用
。focus
@Goldenowner我认为这不会有帮助，因为（如果我理解正确的话）他想选择按钮。您的jQuery是否在
$（文档）中。准备好了（函数（）{…}）？那么你说的是“下面：假设btn 1和btn 4被选中（黄色），而div 2和div 3现在被加载。”。难道不应该加载第1和第2部分而不是第2和第3部分吗？..@JonathonHibbard你是对的。目前，在这两个答案中，它们仅隐藏第一行。我需要隐藏包含您选择的按钮的行下方的任何行。我多年来一直涉猎jquery。我从来不知道“最近的”。我觉得自己像个大白痴。哈哈。谢谢BG101