[asp.net-mvc]在循环中处理的 MVC 多按钮

标签: Asp.net-MVC HTML
发布时间: 2017/2/21 3:13:36
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有下面的视图

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

这里箭头改变的第一项。其他箭头的项目并不改变。在 web 中搜索的结果很多,但没有找到解决办法。谁可以帮我??

解决方法 1:

你的循环生成重复 id 属性是无效的 html 和 getElementById("arrows") 将只返回第一个元素在 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');
    }
});
官方微信
官方QQ群
31647020