通过JS切换div（ASP.NET MVC）

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

Answer 2

使用两个类“ activeQue”和“ hiddenQue”

默认情况下，给第一个问题activeQue类，让hiddenQue休息。

那么您可以使用类似下一个按钮的代码来显示隐藏问题

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

像这样的东西

Answer 3

您可以通过默认情况下将第二个div设置为style="display:none"来执行此操作，当您单击时，将隐藏第一个div并显示第二个div jQuery代码：

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