Javascript 测验结果页面的结尾未正确显示Jquery

我创建了一个包含7个问题的测验。每个问题在按钮中都有一个值，该值在到达结果页面之前一直累积。最后，我希望它显示一个依赖于累积值的图像。这是一种工作，但到处都在变化。第一个结果也会在整个测验中显示出来

另外，如果您对如何更好地简化此代码有什么建议，我将不胜感激

另外，我也不知道为什么问题2没有在这篇文章中正确地显示所有的按钮，但它在我这方面确实运行正常

谢谢

$document.ready函数{ 功能qHome{ $bkgHome.show； $1.5； $2.5； $3.5； $4.5； $5.5； $6.5； $7.5； $results.hide； $山羊皮； $fish.hide； $bird.hide； } $qHome.onload，qHome； 函数queHomeClick{ $bkgHome.hide； $1.5元； $2.5； $3.5； $4.5； $5.5； $6.5； $7.5； $results.hide； $山羊皮； $fish.hide； $bird.hide； } $begin。单击，单击； 函数que1Click{ $bkgHome.hide； $1.5； $2.5元； $3.5； $4.5； $5.5； $6.5； $7.5； $results.hide； $山羊皮； $fish.hide； $bird.hide； } $TREARY_高度。在“单击”时，单击“确定”； $small_space。单击“click”，然后单击“que1”； $TREARM_fire.点击，点击； $TREARY_动物。点击，点击； 函数que2Click{ $bkgHome.hide； $1.5； $2.5； $3.5元； $4.5； $5.5； $6.5； $7.5； $results.hide； $山羊皮； $fish.hide； $bird.hide； } $goat.点击，点击； $fish.on'click'，que2Click； $bird.on'click'，que2Click； $snake.on'click'，que2Click； 函数查询结果{ $bkgHome.hide； $1.5； $2.5； $3.5； $4.5； $5.5； $6.5； $7.5； $results.hide； $山羊皮； $fish.hide； $bird.hide； } $.price.hide； $button.on'mouseenter'，函数{ $this.closest.box.find.blue.addClass.samColor； }; $button.on'mouseleave'，函数{ $this.closest.box.find.blue.removeClass.samColor； }; $button。单击，功能{ $'.box'。删除类“transBox”； $this.closest'.box'.addClass'transBox'； }; $.sale.on'click'，函数{ $.price.fadeIn.show； }; var accumValue=0； $button。单击，功能{ 如果！$this.attr'value'{ 回来 } accumValue+=parseInt$this.attr'value'，10； }; $'finalbutton'。单击，函数{

---

如果accumValue 25&&accumValue简化的一种方法是给每个问题一类问题，然后在隐藏时瞄准它。首先隐藏所有内容，然后显示所需的问题。例如

function queHomeClick () {
    $("#bkgHome").hide();
    $("#question1").show();
    $("#question2").hide();
    $("#question3").hide();
    $("#question4").hide();
    $("#question5").hide();
    $("#question6").hide();
    $("#question7").hide();
    $("#results").hide();
    $("#goat").hide();
    $("#fish").hide();
    $("#bird").hide();
}
$("#begin").on('click', queHomeClick);

将成为

function queHomeClick () {
    $(".question").hide();
    $("#question1").show();
}
$("#begin").on('click', queHomeClick);

事实上，您可以通过将此代码直接放在on方法中而不使用单独的函数来简化它

$("#begin").on('click', function () {
    $(".question").hide();
    $("#question1").show();
});

---

虽然qHome是一个函数，但你的启动代码似乎有一个附加到qHome的行为。如果你只是想让它在加载时运行，你可以把它放在document ready函数中

，这样你就会希望有人为你调试整个应用程序！对吗？我更新了HTML，使其包含一个问题类和CSS。问题类是display:none；然后是f或者是我为.question类放入内联CSS的第一部分，作为display:block。对于JS，我删除了所有顶部部分并包含了您推荐的函数，但我无法显示第二个问题。我已经在代码笔上发布了它。我想问题是您隐藏了问题类，但问题本身就在这些类中sses。你展示了问题1，但它仍然隐藏在一个隐藏的divAh中！就是这样。非常感谢你的指导。我解决了这个问题，但想进一步细分，使代码更简单。我为每个问题创建了一个“问题”类，有一个起始页和一个最终结果页。我不确定这是否是一个问题代码与CSS对齐：$begin.on'click'，函数{$quizHome.hide；$this.closest.question.show；}；下面是所有代码的链接：