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>

Здесь стрелка изменилась для первого пункта..Другие стрелки для элементов не меняется..Я искал lot в интернете, но не нашел решения..Кто-нибудь может мне помочь??

2 ответа

  1. Выбирается только элемент с id=1

    пытаться
    if ($(this).найти (‘#1’).css (‘display’)!= ‘none’) {
    $(этот.)найти (‘#2’).html («вот мой динамический контент»).шоу.)(братья и сестры («div»).прятаться();

  2. Ваш цикл генерирует повторяющиеся 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');
        }
    });