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

我有一个使用数据库的MVC5项目。 在我的项目中，我有一个博客页面。使用控制器加载此页面。 在页面中，我使用一个简单的'@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>
    }

@foreach（Model.vmblogtems中的变量项）
{
@项目.标题
@项目.说明
}

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

我还写了一些jquery：

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

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

//准备好了吗
$（函数（）{
$（'#allblogcontent'）.hide（）；
$（'#moreless'）。单击（函数（）{
$（'#allblogcontent'）.toggle（）；
});
});

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

    @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>
    }

---

有人知道我如何确保只显示或隐藏所选项目的描述吗？我只是花了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>

}

@{
int i=0；
}
@foreach（Model.VmBlogItems中的var项）
{
i++；
@项目.标题
@项目.说明
}

您的代码现在可以找出哪个是哪个

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

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

//准备好了吗
$（函数（）{
$（'.someclass'）.hide（）；
$（'#moreless'）。单击（函数（）{
$（'#'+$（this.attr（'data-desc-id'））.toggle（）；
});
});

脚注

---

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

只需更改以下部分

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

到

---

重复的

id

属性是无效的html-使用类名和相对选择器我了解您的方法，但似乎还有其他问题，因为我一单击a-tag页面就会刷新，我只是逐字复制了您的代码。将

href=“”

更改为

href=“javascript:void（0）”