Html MVC循环中的多按钮处理

我有以下看法

   @Scripts.Render("~/bundles/jquery")
  <script type="text/javascript">
$(document).ready(function () {
       $('#arrows').click(function () {

            switch(document.getElementById("arrows").className) {
                case 'glyphicon glyphicon-triangle-right':
                    document.getElementById("arrows").className = 'glyphicon glyphicon-triangle-bottom';
                   // $('#comments').css({ display: "block" });

                    break;
                case 'glyphicon glyphicon-triangle-bottom':
                    document.getElementById("arrow").className = 'glyphicon glyphicon-triangle-right';
                    //$('#comments').css({display:"none"});
                    break;
            }
        });
       });

<ul class="mar">
            @foreach (var item in Model)
        {
                <li class="mar" style="list-style-type:none">
                    <div style="display:inline-block;font-size:small">

                            <a id="arrows" class="glyphicon glyphicon-triangle-right style="text-decoration:none;cursor:pointer;color:dimgray"></a>

                        <h3 class="mar" style="display:inline-block;">@Html.ActionLink(item.thread.Title, "GetMessage", "Home")</h3>
                    </div>

@Scripts.Render（“~/bundles/jquery”）
$（文档）.ready（函数（）{
$（'#箭头'）。单击（函数（）{
开关（document.getElementById（“箭头”）.className）{
案例“glyphicon glyphicon三角形右侧”：
document.getElementById（“箭头”）.className='glyphicon glyphicon triangle bottom'；
//$（'#comments'）.css（{display:'block}）；
打破
案例“Glyphion Glyphion三角形底部”：
document.getElementById（“arrow”）.className='glyphicon glyphicon triangle right'；
//$（'#comments'）.css（{display:“none”}）；
打破
}
});
});

@foreach（模型中的var项目）
{

您仅选择id为1的元素

试一试
if（$（this）.find（'#1'）.css（'display'）！='none'）{
$（this）.find（‘#2’）.html（‘这是我的动态内容’）.show（）.sides（‘div’）.hide（）；
您的循环正在生成重复的
id
属性，这些属性是无效的html，
getElementById（“箭头”）
将只返回DOM中带有
id=“arrows”的第一个元素

更改代码以使用类名

@foreach (var item in Model)
{
    ....
    <a class="arrows" class="glyphicon glyphicon-triangle-right" ... ></a>
    ....
}

$('.arrows').click(function () {
    if ($(this).hasClass('glyphicon-triangle-right')) {
        $(this).removeClass('glyphicon-triangle-right').addClass('glyphicon-triangle-bottom');
    } else {
        $(this).removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
    }
});