带条件的 jQuery 调查

问题描述

希望有人能够帮助我创建一个条件逻辑。

目前正在执行下面的代码,但理想情况下,我需要的是,如果选择第一个问题的答案 1 来加载不同的问题 2 集。然后根据最后一个答案加载不同的解决方案集。检查下面的当前代码

1/0
function startCheck() {

}

function toggleDiv(e) {
    $(e).toggle()
}
$(document).ready(function() {
    $("#simplesurvey .question").first().show(),$("#simplesurvey .answer").click(function(e) {
         e.preventDefault(),"answer cannotContinue" != $(this).attr("class") ? ($(this).parent(".question").hide(),$(this).parent().next(".question").length ? $(this).parent().next(".question").delay(1).show() : startCheck()) : alert(".")
    })
});
.question{
    display:none;
}
.answer,.final{
    background-color:#146F40;
    display:block;
    color:#fff;
    font-size:18px;
    padding:8px 0;
    margin:8px 0;
    text-decoration:none;
    border-radius:6px
}
.sspbar{
    border-radius: 10px;
    height: 10px;
    width: 100%;
    max-width: 100%;
    background-color: #DDD;
    position: relative;
}
.sspcounter{
    border-radius: 10px;
    height: 10px;
    max-width: 100%;
    background-color: #0e8dc7;
    position: relative;
    top: 0px;
    left: 0px;
}

只是为了给你一个清晰的想法。我正在尝试制作条件逻辑,因此如果在问题 1 上单击答案 1 以加载来自 CSS 类“问题 ans-1”等问题的第二组问题......希望这是可以实现的。期待如何完成它的想法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="simplesurvey"> <div class="question" style="display: block;"> <h5>Question 1</h5> <div class="sspbar"><div class="sspcounter" style="width: 10%;" data-progress-width="NaN"></div></div> <a class="answer" href="#">Answer 1</a> <a class="answer" href="#">Answer 2</a> </div> <div class="question"> <h5>Question 2</h5> <div class="sspbar"><div class="sspcounter" style="width: 66.6667%;" data-progress-width="NaN"></div></div> <a class="answer" href="#">Answer 3</a> <a class="answer" href="#">Answer 4</a> </div> <div class="question"> <h5>Question 3</h5> <div class="sspbar"><div class="sspcounter" style="width: 100%;" data-progress-width="NaN"></div></div> <a class="final" href="https://google.com/">Google</a> <a class="final" href="https://yahoo.com">Yahoo</a> <a class="final" href="https://bing.com">Bing</a> </div> </div>


解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)