在asp.net mvc中使用foreach时如何设置活动li？

Question

NET MVC的音频列表，当使用静态的一切都很好，我可以检测到活跃李。 first in static 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> 

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

    <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标签