Javascript jQuery-用于在页面上显示下一个元素并在单击时隐藏当前元素的函数

我一直在尝试创建一个函数，一旦选中一个单选按钮，它将允许检查ID是否正确，然后在另一个div（不是下一个）中显示后续按钮

单击后续按钮后，它将隐藏上一个div并显示当前div的其余内容

我试图创建一个脚本，无论我想要多少个容器都可以这样做。因此，您可以通过基于答案的单击和检查来遍历页面，显示和隐藏元素

然而，我不知道如何在第一次尝试后实现这一点。任何帮助都将不胜感激。这是我的密码：

$（文档）.ready（函数（）{
$（此）。查找（“.check answer button”）。单击（函数（）{
如果（$（“#正确答案”）。是（“：选中”））{
如果（$（“.error answer”）是（“：visible”））{
$（“.error answer”）.hide（）；
}
$（“.right answer”）.show（）；
$（“.next problem div:first”）.show（）；
$（“.next question button”）。单击（函数（）{
$（“.question单选按钮div:first”）。show（500）；
元("第一组).节目(500);；
$（“.question div:nth child（1）”）.hide（）；
$（“.next question button”）.hide（）；
如果（$（“h4”）是（“：可见”））{
$（“h4”）.hide（）；
}
});
}
否则{
$（“.error answer”）.show（）；
}
});
});
。回答正确，
.答错了{
显示：无；
}
.下一问题组{
显示：无；
}

Q1



A.


B


C


核对答案
做得好，这是正确的
对不起，再试一次
下一个问题
问题2



A.


B


C


核对答案
做得好，这是正确的
对不起，再试一次
我建议您更正您的问答。这必须是一个适用于所有问题的模板，但每个问题/答案不同

避免使用重复ID，并考虑下一个按钮是每个问题的一部分。只有最后一个问题没有下一个问题

考虑使用像answer=“true”这样的属性来代替ID

尽量避免混合使用HTML和引导

您正在寻找的简单演示可能是：


$（文档）.ready（函数（e）{
$（“.next question button”）。在（'click'，函数（e）{
var cachedDiv=$（this）.closest（'.question div'）；
缓存衰减（500，函数（）{
cachedDiv.nextAll（'问题组：第一'）.fadeIn（500）；
});
});
$（“.check answer button”）。在（'click'，函数（e）{
var cachedDiv=$（this）.closest（'.question div'）；
if（cachedDiv.find（':radio:checked'）.attr（'answer'）=='true'）{
$（this.nextAll（“.error answer”）.hide（）；
$（this.nextAll（“.right answer”）.show（）；
cachedDiv.find（'.next question div'）.show（）；
}
否则{
$（this.nextAll（“.error answer”）.show（）；
}
});
$（“.question div:gt（0）”）.hide（）；
});
。回答正确，
.答错了{
显示：无；
}
.下一问题组{
显示：无；
}

Q1



A.


B


C


核对答案
做得好，这是正确的
对不起，再试一次
下一个问题
问题2



A.


B


C


核对答案
做得好，这是正确的
对不起，再试一次
下一个问题
第三季度



A.


B


C


核对答案
做得好，这是正确的
对不起，再试一次
看到结果了吗
完成

几个快速注释：
标记是自动关闭的，因此
是无效的标记。您不能重复使用id。您有两个id为正确答案的输入。您应该将其更改为类，或者添加问题编号，例如
id=“correct-answer-2”
。这种方法可以让你在按钮上添加一个有问题id的数据元素，然后有正确答案/错误答案h4s的id，这些id也有问题id，这样你可以有选择地隐藏/显示它们。你确实有一些相当大的问题，你的标记是Steve张贴的，但这里有一些基于你的代码，应该可以让你在正确的方向感谢@FunkDoc，这让我对gaetanoM的情况有了更好的了解。这就是我要找的。大量帮助理解！