js、jq实现答题上一题下一题

一、以下是效果图

说明：第一题只有一个“下一题”按钮，中间题目有两个按钮“上一题”“下一题”，最后一题按钮改为“提交”；

二、代码

js代码（jquery需要自行引入）

 var number = document.getElementsByClassName("base_star");
        var index = 0;
        var total = $(".answer_list .topic").length;//题目总数
        var now_topic = index+1*1;//当前题数
        $(".base_star").text(now_topic+'/'+total+'（单选题）');// 当前题数/总题数
        $(".prev").hide();
        $(".next").hide();
        $(".Submit").hide();
        $(".topic").hide();//所有题目隐藏
        $(".topic").eq(index).show();//第一个题目显示
        // 上一个
        function prev(){
            index--;
            var now_topic = index+1*1;//当前题数
            $(".base_star").text(now_topic+'/'+total+'（单选题）');
            $(".topic").hide();//所有题目隐藏
            $(".topic").eq(index).show();//第几个题目显示
            // 当索引为0时（题数是1），只显示“下一题”按钮
            if(this.index===0){
                $(".prev").hide();
                $(".next").hide();
                $(".Submit").hide();
                $(".first_next").show();
            }
        }
        // 下一个
        function next(){
            index++;
            $(".topic").hide();//所有题目隐藏
            $(".topic").eq(index).show();//第一个题目显示
            var now_topic = index+1*1;//当前题数
            $(".base_star").text(now_topic+'/'+total+'（单选题）');
            $(".first_next").hide();
            $(".prev").show();
            $(".next").show();
            // 当前题数和总题数相等时(最后一题时)，显示提交按钮
            if(this.index+1 == this.total){
                $(".first_next").hide();
                $(".prev").hide();
                $(".next").hide();
                $(".Submit").show();
            }
        } 
        // 单选
        $(function () {
            //点击单选按钮后面的文字说明自动使相应的单选按钮处于选中状态
            $(".selectRadio").click(function () {
            //console.info($(this).prev(":radio"));
            $(this).prev(":radio").prop("checked", true);
            });
        });

HTML代码

说明一下：因为修改了一下审核一直不通过，所以把题目都改掉了，但不影响功能。

<div class="answers">
        <div class="partake_bg">
            <div class="flex1">
                <p class="base_star">（单选题）</p>
            </div>
        </div>
        <div class="answer_list">
            <div class="topic">
                <p>1、第一题</p>
                <div>
                    <p><input type="radio" name="t1" value="A"><span class="selectRadio">A、1945，11月10日 重庆</span></p>
                    <p><input type="radio" name="t1" value="B"><span class="selectRadio">B、1946，12月10日 上海</span></p>
                    <p><input type="radio" name="t1" value="C"><span class="selectRadio">C、1945，12月16日 重庆</span></p>
                    <p><input type="radio" name="t1" value="D"><span class="selectRadio">D、1946，12月6日 北平</span></p>
                </div>
            </div>
            <div class="topic">
                <p>2、第二题</p>
                <div>
                    <p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p>
                    <p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p>
                    <p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p>
                    <p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p>
                </div>
            </div>
            <div class="topic">
                <p>3、第三题</p>
                <div>
                    <p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p>
                    <p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p>
                    <p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p>
                    <p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p>
                </div>
            </div>
            <div class="topic">
                <p>4、第四题</p>
                <div>
                    <p><input type="radio" name="t1" value="A"><span class="selectRadio">A、经济界人士</span></p>
                    <p><input type="radio" name="t1" value="B"><span class="selectRadio">B、医卫界人士</span></p>
                    <p><input type="radio" name="t1" value="C"><span class="selectRadio">C、知识分子</span></p>
                    <p><input type="radio" name="t1" value="D"><span class="selectRadio">D、海外关系人士</span></p>
                </div>
            </div>
        </div>
        <div class="switch_btn">
            <p class="first_next" onclick="next()">下一题</p>
            <p class="prev" onclick="prev()">上一题</p>
            <p class="next" onclick="next()">下一题</p>
            <p class="Submit bounceIn">提交</p>
        </div>

    </div>

css代码 

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: #f6f7f8;
}

.partake_bg{
    width: 100%;
    height: 11.875rem;
    background:linear-gradient(#3e7bea 0%,#93b2f0 100%);
    padding: 2.8125rem 1.875rem 0;
}
.partake_bg p{
    font-size: 1rem;
    color: #fff;
    padding-bottom: 2.1875rem;
}
.answers{
    padding-bottom: 5.9375rem;
}

.answers .answer_list{
    width: 92%;
    height: 36.25rem;
    background-color: #fff;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
    margin: 0 auto;
    margin-top: -5rem;
    padding: 1.875rem .75rem;
}
.answer_list .topic{
    display: none;
}

.answer_list .topic>p{
    font-size: 1.125rem;
    color: #373737;
    font-weight: bold;
    line-height: 1.875rem;
    margin-bottom: 1.25rem;
   
}
.answer_list .topic div p{
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 0;
}
.answer_list .topic div input{
    margin: .25rem .75rem 0 0;
}
.answer_list .topic div span{
    width: 16.875rem;
    font-size: .875rem;
    color: #666666;
    line-height: 1.5rem;
}
.switch_btn{
    width: 100%;
    height: 4rem;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px rgba(180, 193, 203, 0.5);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem 1rem;
}
.first_next,.Submit{
    width: 100%;
    height: 100%;
    line-height: 3rem;
    border-radius: 3rem;
    background-color: #658BFF;
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
}

.prev,.next{
    width: calc((100% - .625rem) / 2);
    height: 100%;
    float: left;
    line-height: 3rem;
    border-radius: 3rem;
    background-color: #658BFF;
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
}
.prev{
    margin-right: .625rem;
    border: 1px solid #B3B5B9;
    background-color: #fff;
    color: #B3B5B9;
}

</style>

为什么不点赞~~~~