单击按钮，在主视图中的 foreach 语句中一次显示/隐藏部分视图结果答案

【问题标题】：Show/Hide partial view result one display at a time in foreach statement in main view at the click of a button单击按钮，在主视图中的 foreach 语句中一次显示/隐藏部分视图结果
【发布时间】：2021-12-16 02:23:32
【问题描述】：

我在主视图中有一个部分列表视图。局部视图在主视图的 foreach 语句中呈现。我想在单击按钮时一次显示一个显示部分视图结果，而不是一次在页面上显示列表详细信息，条件是在允许之前填充当前显示的部分视图中的字段下一个要显示的结果

在我的主要观点中：

<div class="">
   @foreach(var subline in Model.Lines)
   {
      @Html.Partial("_Lines", subline)
   }
 </div>

在我的部分观点中：

@using (Html.BeginCollectionItem("Lines"))
{
  <div class="partial-class-result">
     <div class="question-code">
        @switch (Model.Question_Code)
        {
            case "01":
                <h6>Question 1 of @ViewBag.NoOfQuestions</h6>
                break;
            case "02":
                <h6>Question 2 of @ViewBag.NoOfQuestions</h6>
                break;
            case "03":
                <h6>Question 3 of @ViewBag.NoOfQuestions</h6>
                break;
            case "04":
                <h6>Question 4 of @ViewBag.NoOfQuestions</h6>
                break;
            case "05":
                <h6>Question 5 of @ViewBag.NoOfQuestions</h6>
                break;
        }
    </div>
    <div class="question">
        <h5 class="arm-text-color">@Html.DisplayFor(model => model.Question)</h5>
    </div>
    <div class="response">
        <h5 class="arm-text-color">@Html.EditorFor(model => model.Response)</h5>
    </div>
   
    <div class="survey-control">
        <button type="button" class="bg-info btn-group-lg btn-left">Previous</button>
        <button type="button" class="bg-info btn-group-lg btn-right">Next</button>
    </div>
   </div>
 }

我的 javascript 代码：

//next button
$('.btn-right').on('each', function (e) {
    $(this).on('click', function () {
        if ($(this).parent().siblings('#Response').val() == '')
            return;
        $(this).parent().hide();
        $(this).parent().nextSibling().show();
    });
});
//previous button
$('.btn-left').on('each', function (e) {
    $(this).on('click', function () {
        $(this).parent().hide();
        $(this).parent().previousSibling().show();
    });
});

CSS 代码：

.partial-class-result {
   display: none;
}

我的 javascript 代码似乎没有做任何事情。我想知道如何让它工作。

【问题讨论】：

标签： javascript jquery asp.net-mvc model-view-controller asp.net-mvc-partialview

【解决方案1】：

我已经能够让它工作了。

这是修改后的 Javascript 代码

$('body').on('click', '.btn-right', function (e) {
        var id = $(this).parent().parent().children().first().val();
        var resp = $('input[name="SurveyLines[' + id + '].Response"]:checked').val();
        if ($('input[name="SurveyLines[' + id + '].Response"]:checked').val() == undefined) {
            return;
        };
        if ($(this).parent().parent().next().is('div.survey-line')) {
            $(this).parent().parent().next().show();
            $(this).parent().parent().hide();

        } else {
            $('#submit-survey').parent().show();
        };
    });

【讨论】：