切换的div

Question

我有AJAX请求从后端

这里得到问题1 - Question10是请求代码

<script> 
$(document).ready(function() { 
    question_block(); 
}); 

function question_block() { 
    $.ajax({ 
     url: '@Url.Action("QuestionBlocks", "Interwier")', 
     contentType: 'application/json; charset=utf-8', 
     type: 'GET', 
     dataType: 'json', 
     processData: false, 
     success: function(result) { 
      var email = result; 
      for (var i = 0; i <= email.length - 1; i++) { 
       var question = '<div style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' + email[i].Question1 + '</div>'+ 
       '<div style="font-size:20px;">' + email[i].Question2 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question3 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question4 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question5 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question6 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question7 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question8 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question9 + '</div>' + 
        '<div style="font-size:20px;">' + email[i].Question10 + '</div>'; 
       $("#questions").append(question); 
      } 
     }, 
     error: function() { 
      alert("Smth wrong in controller"); 
     } 
    }); 
} 

我需要做可见的第一个div用于默认，当我点击按钮时，例如next我需要隐藏第一个div，并使第二个可见等。

我该怎么做？

Answer 1

 <script> 
$(document).ready(function() { 
    question_block(); 
}); 

function question_block() { 
    $.ajax({ 
     url: '@Url.Action("QuestionBlocks", "Interwier")', 
     contentType: 'application/json; charset=utf-8', 
     type: 'GET', 
     dataType: 'json', 
     processData: false, 
     success: function(result) { 
      var email = result; 
      for (var i = 0; i <= email.length - 1; i++) { 
       var question = '<div style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' + email[i].Question1 + '</div>'+ 
       '<div style="font-size:20px;">' + email[i].Question2 + '</div>' + 
        '<div style="font-size:20px;" class="que show'">' + email[i].Question3 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question4 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question5 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question6 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question7 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question8 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question9 + '</div>' + 
        '<div style="font-size:20px;" class="que hide">' + email[i].Question10 + '</div>'; 
       $("#questions").append(question); 
      } 
     }, 
     error: function() { 
      alert("Smth wrong in controller"); 
     } 
    }); 
} 


// click on next 
function next(){ 
    $(".que").each(function(){ 
     if($(this).hasClass('show')){ 
     $(this).removeClass("show").addClass('hide'); 
     $(this).next().removeClass("hide").addClass('show'); 
     } 
    }); 
} 
// same you can do for back button 

Answer 2

你可以做到这一点与集中的第二个div默认 采取style="display:none"，当你点击你会躲拳头格，并显示第二个div jQuery代码：

$("#first").slideUp(); 
$("#second").slideDown(); 

Answer 3

使用两班“activeQue”和“hiddenQue “

默认给第一个问题activeQue类并给hiddenQue休息。

那么你可以使用类似的代码上一个按钮，显示隐藏的问题

var element = $(".activeQue"); 
$(element).removeClass("activeQue").addClass("hiddenQue"); 
$(element).next().addClass("activeQue"); 

像这样