jeudi 15 avril 2021

jQuery next() method not working properly

I'm new to jQuery and I have a problem with next() method.Im currently working on an online exam, Im new to programming so I copy some codes online, so fetch my questions from database then display it like this.

    <div class='myQuestion active'>..</div>
    <div class='myQuestion'>..</div>
    <div class='myQuestion'>..</div>
    <div class='myQuestion'>..</div>
    <div class='myQuestion'>..</div>
    <div class='myQuestion'>..</div>

So each div has form inside with button next and prev so this is the out out enter image description here

But when i click next sometimes it working but most of the time nothing will happened it will just display question 1.

This is the code I copy from some source , but I already change some here.

$(document).on("keydown", e), setTimeout(function() {
          $(".nextbtn").on('click',function() {
              var e = $(".myQuestion.active");
              $(e).removeClass("active"), $(e).next().length == 0  ? (check()) : ($(e).next().addClass("active"), $(".myForm")[0].reset(),
              $(".prebtn").attr("disabled", false));
          }),
          $(".prebtn").click(function() {  
              var i;
              var e = $(".myQuestion.active");
              $(e).removeClass("active"),
              $(e).prev().addClass("active"), $(".myForm")[0].reset()
              $(".myQuestion:first-child").hasClass("active") ? $(".prebtn").attr("disabled", true) :   $(".prebtn").attr("disabled", false);
              $(".prebtn").prop("disabled")?i=1:i=0;
          })
      }, 700);

I don't know what's the point of on keydown, but this code is inside already the document.ready function.

This is the vue template which contain the form:

    <template>
  <div class="main-questions">
    <div class="myQuestion" v-for="(question, index) in questions" :key="index + uuid">
      <div class="row">
        <div class="col-md-6">
          <blockquote>
            Total Questions &nbsp;&nbsp; / 
          </blockquote>
          <div class="q-block">
            <p class="question"></p>
          </div>
          <form class="myForm" action="/quiz_start" v-on:submit.prevent="createQuestion(question.question_id,question.index)" method="post">
              <div v-for="choices,indx in JSON.parse(question.choices)" :key="indx">
                <label class="form-label">
                <input class="radioBtn" v-bind:id="'radio'+indx" type="radio" v-bind:value="'opt-'+indx" v-model="result.user_answer" aria-checked="false"> <span></span>
              </label><br>
              </div>
            <div class="row">
              <div class="col-md-6 col-xs-8">
                <button type="submit" class="btn btn-wave btn-block prebtn">Previous</button>
              </div>
              <div class="col-md-6 col-xs-8">
                <button type="submit" class="btn btn-wave btn-block nextbtn">Next</button>
              </div>
            </div>
          </form>
        </div>
          <div class="question-block-tabs" v-if="question.question_img != null || question.question_video_link != null">
            <ul class="nav nav-tabs tabs-left">
              <li v-if="question.question_img != null" class="active"><a href="#image" data-toggle="tab">Question Image</a></li>
              <!--<li v-if="question.question_video_link != null"><a href="#video" data-toggle="tab">Question Video</a></li>-->
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="image" v-if="question.question_img != null">
                <div class="question-img-block">
                  <img :src="'../images/questions/'+question.question_img" class="img-responsive" alt="question-image">
                </div>
              </div>
              <!--<div class="tab-pane fade" id="video" v-if="question.question_video_link != null">
                <div class="question-video-block">
                  <h3 class="question-block-heading">Question Video</h3>   
                  <iframe :id="'video'+(index+1)" width="460" height="345" :src="question.question_video_link" frameborder="0" allowfullscreen></iframe>
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

Can someone help me with this to figure out what is missing or wrong about this code.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire