javascript - 通过 JS (ASP.NET MVC) 切换 div

Question

我有 AJAX 请求从后端获取 Question1-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