Question

我有PartialView

这是代码

  <div id="question1" style="font-size:20px; margin-bottom:10px;">
    @Html.DisplayFor(modelItem => Model.Question1)
</div>
<div id="question2" style="font-size:20px; margin-bottom:10px;">
    @Html.DisplayFor(modelItem => Model.Question2)
</div>
<div id="question3" style="font-size:20px; margin-bottom:10px;">
    @Html.DisplayFor(modelItem => Model.Question3)
</div>
<div  id="question4" style="font-size:20px; margin-bottom:10px;">
    @Html.DisplayFor(modelItem => Model.Question4)
</div>

我通过AJAX调用PartialView

代码在这里：

<script>
$(document).ready(function () {
    var full_url = document.URL; // Get current url
    var url_array = full_url.split('/') // Split the string into an array with / as separator
    var id = url_array[url_array.length - 1];  // Get the last part of the array (-1)



    $.ajax({
        type: "GET",
        url: "/interwier/QuestionBlock",
        data: { id: id },
        success: function (data) {
            $("#questions").html(data);

        },
        error: function () {
            alert("Smth wrong in controller");
        }
    });
});

当我点击按钮用id = question2替换div时，如何用id = question1显示div？按钮不在PartialView中。

更新

我决定更改逻辑并删除PartialView

我在div中创建代码

 <div id="questions" class="qustion-div-one">
        <div id="question1" style="font-size:20px; margin-bottom:10px;">
            @Html.DisplayFor(modelItem => Model.Question1)
        </div>
        <div id="question2" style="font-size:20px; margin-bottom:10px; display:none">
            @Html.DisplayFor(modelItem => Model.Question2)
        </div>
        <div id="question3" style="font-size:20px; margin-bottom:10px; display:none">
            @Html.DisplayFor(modelItem => Model.Question3)
        </div>
        <div id="question4" style="font-size:20px; margin-bottom:10px; display:none">
            @Html.DisplayFor(modelItem => Model.Question4)
        </div>
    </div>

我需要点击按钮点击隐藏question1，question2可见，下一次点击question2将被隐藏，question3可见等等。

或者只是简单地删除question1并更改为question2等。

我怎么能这样做？

更新2

我尝试做这个脚本

 $('#next').click(function () {
    $('#questions>div').toggle();
});

但它会打开所有3个div，但我需要question2 div

Answer 1

在这种情况下，你能更好地解释一下你期望的结果吗？也许你想要的是用JQuery方法$.ajax（Docs）替换JQuery load调用，参见＆＃34;加载页面片段＆＃34;子标题。您可以动态构造＆＃34;后缀选择器表达式＆＃34;替换页面的特定部分，例如

$( "#question1" ).load( "/interwier/QuestionBlock #question2" );

但我不确定我的问题是否正确。

Answer 2

您可以通过多种方式执行此操作，也可以使用可折叠面板来显示问题。

以下是执行此操作的简单方法。

CSS课程。

.inactive {  display:none; }

.active { display:block; }

在底部的html添加按钮

<button id="next">Next</button>

在页面就绪时，您需要在下面编写代码。

$(document).ready(function() {
    $('#questions div').attr( "class", "inactive" );
    $('#questions div:first-child').attr( "class", "active" );
});

$('#next').click(function() {
  var div = $('#questions div.active');
  div.attr("class", "inactive");
  if(div.next().length>0){
     div.next().attr( "class", "active");
  }
  else{
    $('#questions div:first-child').attr( "class", "active" );
  }
});

直播示例：https://jsfiddle.net/a0du6u5d/1/

Answer 3

我想你可以试试这个：用data- *属性装饰你的div，比如数据位置，#next按钮上的另一个属性就像一个计数器：

<div id="questions" class="qustion-div-one" data-pos="1">
    <div id="question1" style="font-size:20px; margin-bottom:10px;">
        @Html.DisplayFor(modelItem => Model.Question1)
    </div>
    <div id="question2" style="font-size:20px; margin-bottom:10px; display:none" data-pos="2">
        @Html.DisplayFor(modelItem => Model.Question2)
    </div>
    <div id="question3" style="font-size:20px; margin-bottom:10px; display:none" data-pos="3">
        @Html.DisplayFor(modelItem => Model.Question3)
    </div>
    <div id="question4" style="font-size:20px; margin-bottom:10px; display:none" data-pos="4">
        @Html.DisplayFor(modelItem => Model.Question4)
    </div>
</div>

<button id="next" data-target"1">Next</button>

然后点击你增加数据目标，如果＆lt; div的数量。像这个老问题

Show & hide elements by data attribute

用另一个div替换div（ASP.NET MVC）

3 个答案: