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

使用两个类＆＃34; activeQue＆＃34;和＆＃34; hiddenQue＆＃34;

默认情况下给出第一个问题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();

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

3 个答案: