通过 JS (ASP.NET MVC) 切换 div答案

【问题标题】：Switching divs via JS (ASP.NET MVC)通过 JS (ASP.NET MVC) 切换 div
【发布时间】：2017-09-16 18:59:23
【问题描述】：

我有 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 并让第二个可见，等等。

我该怎么做？

【问题讨论】：

标签： javascript jquery html css asp.net

【解决方案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

【讨论】：

【解决方案2】：

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

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

然后你可以使用类似下一个按钮的代码来显示隐藏问题

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

类似的东西

【讨论】：

谢谢，我会试试的
@Eugene hiddenQue 和 activeQue 是您需要在 css 或 cshtml 页面中定义的自定义类
.hiddenQue{display:none;}

【解决方案3】：

您可以通过设置第二个 div 默认采用 style="display:none" 来做到这一点当您单击时，您将隐藏第一个 div 并显示第二个 div jquery 代码：

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

【讨论】：