如何在 asp.net MVC 中使用 foreach 时设置活动 LI

Question

net MVC with audio list，当使用静态时，一切都很好，我可以检测到活动的李。第一个在静态 i 中突出显示第一个 li 标签是活动的，但在项目中所有 li 都是活动的，因为在 foreach 循环中

  $(document).ready(function () {
            init();
            function init() {
                var current = 0;
                var audio = $('#audio');
                var playlist = $('#playlist');
                var tracks = playlist.find('li a');
                var len = tracks.length - 1;
                audio[0].volume = .10;
                audio[0].play();
                playlist.on('click', 'a', function (e) {
                    e.preventDefault();
                    link = $(this);
                    current = link.parent().index();
                    run(link, audio[0]);
                });
                audio[0].addEventListener('ended', function (e) {
                    current++;
                    if (current == len) {
                        current = 0;
                        link = playlist.find('a')[0];
                    } else {
                        link = playlist.find('a')[current];
                    }
                    run($(link), audio[0]);
                });
            }
            function run(link, player) {
                player.src = link.attr('href');
                par = link.parent();
                par.addClass('active').siblings().removeClass('active');
                player.load();
                player.play();
            }
        });

        #playlist, audio {
            background: #666;
            width: 400px;
            padding: 20px;
        }
        .active a {
            color: #5DB0E6;
            text-decoration: none;
        }
        #playlist{
                list-style-type: decimal;
        }
        li a {
            color: #eeeedd;
            background: #333;
            padding: 5px;
            display: block;
        }
            li a:hover {
                text-decoration: none;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<audio id="audio" preload="auto" tabindex="0" controls="">
        <source src="http://23.237.126.42/ost/batman-arkham-origins/tjhfosqu/01-%20Arkham%20Origins%20Main%20Titles.mp3">
        Your Fallback goes here
    </audio>
    <ul id="playlist">
        <li class="active">
            <a href="http://23.237.126.42/ost/batman-arkham-origins/tjhfosqu/01-%20Arkham%20Origins%20Main%20Titles.mp3">
                Ravel Bolero
            </a>
        </li>
        <li>
            <a href="http://23.237.126.42/ost/batman-arkham-origins/rlwvcqzj/02-%20The%20Night%20Before%20Christmas.mp3">
                Moonlight Sonata - Beethoven
            </a>
        </li>
        <li>
            <a href="http://23.237.126.42/ost/batman-arkham-origins/jfehfzva/03-%20Black%20Mask%20Escapes.mp3">
                Canon in D Pachabel
            </a>
        </li>
        <li>
            <a href="http://23.237.126.42/ost/batman-arkham-origins/muicjnsf/04-%20Killer%20Croc.mp3">
                patrikbkarl chamber symph
            </a>
        </li>
    </ul>

但是在我的项目和使用列表中使用时，我无法检测到活动 li，我该如何解决这个问题

    <audio id="audio" preload="auto" tabindex="0" controls="">
    <source src="@Model.First().Url">
</audio>
<ul id="playlist">
    @foreach (var item in Model)
    {
        <li class="active">
            <a href="@item.Url">
                @item.Title
            </a>
        </li>
    }
</ul>

感谢您阅读我的问题，请帮助我解决这个问题

Answer 1

您可以像以下代码一样首次检查页面何时加载

    <audio id="audio" preload="auto" tabindex="0" controls="">
    <source src="@Model.First().Url">
</audio>
<ul id="playlist">
    @foreach (var item in Model)
    {
        @if (item == Model.First())
        {
            <li class="active">
                <a href="@item.Url">
                    @item.Title
                </a>
            </li>
        }
        else
        {
            <li >
                <a href="@item.Url">
                    @item.Title
                </a>
            </li>
        }
    }
</ul>

下次根据您的选择更改活动 li 标签