一个简单的显示或隐藏项.文本按钮

本文关键字：隐藏 文本 按钮 显示 一个 简单 | 更新日期: 2023-09-27 18:17:17

我有一个mvc 5项目使用数据库。在我的项目中，我有一个博客页面。此页面是通过控制器加载的。在页面中，我使用简单的@foreach(var item In collection)动态创建了一个项目列表(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个小时阅读，试着读，但遗憾的是没能成功。我需要一些帮助。

一个简单的显示或隐藏项.文本按钮

首先修改标记，使每个描述标签附带一个唯一的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>

一个脚注

此方法将在标记之间创建静态引用，因此您可以根据需要移动标记。到目前为止，如果更改标记的顺序，这里展示的其他两个解决方案将中断。

把下面的部分改成

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


$('#moreless').click(function () {
    $(this).siblings('#allblogcontent').toggle();
});
相关文章：