jQuery上一個按鈕需要在第一個Q上不可見）1＆jQuery Next按鈕在最後一頁Q中需要隱藏）10

Question

好吧，所以我遇到了一個小問題，我有兩個jQuery按鈕「上一個」和「下一個」，現在我需要做的是在第一個問題上使前一個按鈕不可見，因爲您不能倒退，下一個按鈕在最後一個頁面上不可見，因爲它是最後一個最終頁面。什麼是最好的方式可以去做這件事。這裏是我的代碼.....

 if (i.Question_Type == "DROPDOWN") 
    { 

     <div class="container text-center"> 


       <div class="row idrow" data-questions="@counter"> 
        @{counter++; 
        } 




         <div id="question1" class="form-group"> 
          <label class="lab text-center" for="form-group-select"> 
           @i.Question_Order @Html.Raw(@i.Question) 
          </label> 
          <select class="form-control" id="form-group-select"> 
           @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++) 
            { 
             var t = x - 1; 
             if (i.qOps != null) 
             { 
             <option> @i.qOps.options[t]</option> 
             } 
             else 
             { 
             <option> @x</option> 

             } 
            } 
          </select> 
         </div> 







       </div> 

     </div> 

         } 

         if (i.Question_Type == "RADIO") 
         { 




     <div class="container"> 
      <div class="row idrow" data-questions="@counter"> 
       @{counter++; 
       } 
       <div class="form-group"> 
        <label class="lab" for="questions"> 
         @i.Question_Order @i.Question 
        </label> 
        <div class="row"> 
         <div class="col-xs-12"> 
          <div id="question1" class="radio-inline"> 
           @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++) 
           { 
            var t = x - 1; 
            if (i.qOps != null) 
            { 
             <label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label> 
            } 
            else 
            { 

              <label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label> 

            } 
           } 
          </div> 

         </div> 

        </div> 
       </div> 


      </div> 
     </div> 

    } 
    if (i.Question_Type == "CHECKBOX") 
    { 
     for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++) 
     { 
      @*<div class="container"> 
       <div class="row"> 

        <label>@y</label> <input type="checkbox" name="question"> 

       </div> 
      </div>*@ 
     } 
    } 

} 
<div class="azibsButtons"> 
    <button type="button" id="previous" class="btn btn-primary pull-left">Prev</button> 

    <button type="button" id="next" class="btn btn-primary pull-right">Next</button> 
</div> 



<script> 
    $(document).ready(function() { 
     $(".idrow").each(function (i) { 

      var inner = $(this).data('questions'); 
      if (inner == 0) { 

       $(this).removeClass('hidden'); 
      } else { 
       $(this).addClass('hidden'); 

      } 
     }); 
     $("#next").click(function() { 

      $(".idrow").each(function (i) { 

       var inp = $(this); 
       if (!inp.hasClass('hidden')) { 
        var dataVal = inp.data("questions"); 
        dataVal++; 
        inp.addClass('hidden'); 


        $('[data-questions=' + dataVal + ']').removeClass('hidden'); 

        return false; 

       } 
      }); 
     }); 

      $("#previous").click(function() { 

       $(".idrow").each(function (i) { 

        var inp = $(this); 
        if (!inp.hasClass('hidden')) { 
         var dataVal = inp.data("questions"); 
         dataVal--; 
         inp.addClass('hidden'); 


         $('[data-questions=' + dataVal + ']').removeClass('hidden'); 

         return false; 

        } 

       }); 
      }); 


    }); 

</script> 

Answer 1

你的代碼應該是這樣..試試這個，讓我知道如果你需要任何解釋

$(document).ready(function() { 
    ShowTheelement(0);      //run a function 
    $("#previous").addClass('hidden');  // hide the previous button 

    var dataVal = 0;      // set dataVal to 0 

    $("#next").click(function() { 
    dataVal++;       // add 1 to data val on each click 
    $("#previous").removeClass('hidden');// show the previous button 
    dataVal == $(".idrow[data-questions]").length - 1 ? $(this).addClass('hidden'): $(this).removeClass('hidden'); // similar to if/else statement .. If dataVal equal the numbers of `idrow` - 1 hide the next button if not show the next button 
    ShowTheelement(dataVal); // run a function to hide divs and show just the one we need with new `dataVal` 
    }); 

    $("#previous").click(function() { 
     dataVal--; 
     $("#next").removeClass('hidden'); 
     dataVal == 0 ? $(this).addClass('hidden'): $(this).removeClass('hidden'); 
     ShowTheelement(dataVal); 
    }); 
}); 
// function to hide all `.idrow` elements and show the one with `data-questions='"+dataVal+"'` 
function ShowTheelement(dataVal){ 
    $(".idrow").addClass('hidden'); 
    $(".idrow[data-questions='"+dataVal+"']").removeClass('hidden'); 
} 

說明：

• 雖然您需要添加/刪除class onload，但單擊下一個按鈕並單擊上一個按鈕。無需每次都重複您的代碼。這將是更好地使這個功能並通過dataVal這個功能

• 更多解釋請閱讀代碼