javascript - 如何使用 jquery 或 javascript 在 foreach 情况下显示和隐藏 Onclick 按钮？

Question

我使用 Accordion 在点击时关闭和打开内容。

它有一个条形部分，单击该部分时，下面的内容将如本例所示:http://jeevanscientific.com/resources.html

我需要在每个栏的右侧添加一个向上按钮/向下按钮。
单击特定栏后，仅该栏会显示向下按钮。这就像相对于按钮单击隐藏和显示向下和向上按钮。

问题是我正在使用 foreach 来显示元素。我该如何实现这个场景？

这是我的 HTML :

foreach (var i in footerPage.StaticPagePersons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>
                <i class="fa fa-chevron-up table-middle" aria-hidden="true"></i>
                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    @Html.Raw(@i.BioDetail)
                </div>
            </div>
        </div>
    </div>
}

Clarification

每个选项卡的右侧..这是要求...单击时应显示向上按钮，否则应显示向下按钮

Answer 1

foreach (var i in person.Persons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>

                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    if(your condition){
                        @Html.Raw(@i.BioDetail) //it will show only if your ncondtion satisfied
                    }
                </div>
            </div>
        </div>
    </div>
}

  <script>
    $(document).ready(function () {
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
        });

        $('.collapse').on('hidden.bs.collapse', function () {
            $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
        });
    });
</script>