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

Question

我在主视图中有一个部分列表视图。 局部视图在主视图的 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 代码似乎没有做任何事情。 我想知道如何让它工作。

Answer 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();
        };
    });