Question

我有一个使用数据库的mvc 5项目。在我的项目中，我有一个博客页面。使用控制器加载此页面。在页面中，我使用简单的@foreach（集合中的var项）动态创建项目列表（blogitems）。每个项目都有一个id（偏离课程），标题和描述。

    @foreach (var item in Model.VmBlogItems)
    {
        <div class="allblogs">
            <div class="blogtitle">
                <h4>@item.Title</h4>
            </div>
            <div id="allblogcontent">
                @item.Description
            </div>
            <a id="moreless" href="">Lees meer</a>

        </div>
    }

我现在的问题是如何创建一个按钮，以便在点击它时隐藏或显示描述。

我还写了一些jquery：

<script type="text/javascript">
    //when ready
    $(function () {
        $('#allblogcontent').hide();

        $('#moreless').click(function () {
            $('#allblogcontent').toggle();
        });
    });
</script>

但是，当我尝试此操作时，我的所有项目都会显示或隐藏描述。

有人知道我如何确保只显示或隐藏所选项目的描述？我只花了6个小时阅读，尝试并且遗憾地未能使它工作。我可以使用一些帮助。

Answer 1

首先修改标记，以便每个描述标记都附加一个唯一的ID，相应的按钮具有对该id的引用

@{
   int i=0;
}
@foreach (var item in Model.VmBlogItems)
{
    i++;

    <div class="allblogs">
        <div class="blogtitle">
            <h4>@item.Title</h4>
        </div>
        <div id="allblogcontent@i" class='someclass'>
            @item.Description
        </div>
        <a id="moreless" href="" data-desc-id='allblogcontent@i'>Lees meer</a>

    </div>

}

您的代码可以确定哪个是现在。

<script type="text/javascript">
    //when ready
     $(function () {
        $('.someclass').hide();

        $('#moreless').click(function () {
            $('#' + $(this).attr('data-desc-id')).toggle();
        });
    });
</script>

脚注

此方法将在标记之间进行静态引用，因此您可以根据需要移动标记。到目前为止，此处显示的其他两个解决方案将在您更改标记的顺序时中断。

Answer 2

只需更改以下部分

即可

$('#moreless').click(function () {
    $('#allblogcontent').toggle();
});

到

$('#moreless').click(function () {
    $(this).siblings('#allblogcontent').toggle();
});

一个简单的显示或隐藏item.text按钮

2 个答案:

脚注