javascript - 如何更改通过 XMLHttpRequest 添加的第一个 LI 值的颜色？

Question

我正在开发一个元素，用户可以转到特定页面并浏览特定提要。此提要是通过 XMLHttpRequest 动态添加的，这将给出 #Cat=(value)将参数传递给 PHP 解析器，然后解析器将执行适当的操作。

在此页面中，有几个 LI 元素将用于用户过滤/循环提要。这些 LI 元素对于每个页面来说都是不同的 - 它们是从数据库动态添加的。

只要用户单击特定 LI 或 URL 更改为包含该类别，我就成功地更改了 LI 的颜色。

我是通过以下方式做到这一点的:从数据库下载所有类别，并适本地显示它们。然后，我从 URL 获取 #Cat= 值，并执行 switch 语句 - 如果 Cat 值等于 LI 值，则更改 LI 值的颜色。

但是，我的问题是第一个 LI(无论页面如何，都不是拼写错误)不会改变。例如:一页的网址为 #Cat=Front页面，如果我单击类别“首页”，它不会更改，因为它是第一个 LI。在另一个页面上，URL 也将是 #Cat=Front页面，如果我单击类别“首页”，它会更改颜色，因为它不是第一个 LI。

我认为这是我的 JavaScript/JQuery这就是导致问题的原因。

<强> JavaScript/JQuery:

activeCat("Default");

$(window).on( "hashchange", function()
{
    var Url = window.location.href;
    var Category = Url.substring(Url.indexOf("#Cat=") + 5);
    var Cat = decodeURI(Category);
    activeCat(Cat);
});

function activeCat(cat)
{
    switch (cat)
    {
        case "Default":
            $("#channelCategories li").first().css("color", "#2980b9");
            break;
        case "Front Page":
            $('ul li').each(function(i)
            {
                if($(this).hasClass('channelCategory'))
                {
                    $(this).css("color","black");
                }
            });
            alert("Channel has front-page category");
            $("#channelCategories li:contains('Front Page')").css("color", "#2980b9");
            break;
        case "United Kingdom":
            $('ul li').each(function(i)
            {
                if($(this).hasClass('channelCategory'))
                {
                    $(this).css("color","black");
                }
            });
            $("#channelCategories li:contains('United Kingdom')").css("color", "#2980b9");
            break;

<强> PHP:

while($record = mysqli_fetch_array($myData))
{
    $Category = $record["Category"];
    if($i <= 5)
    {
        $html .=    "<a href='#Cat=$Category' class='noLink' id='$Category'><li class='channelCategory noLink Text'>$Category</li></a>";
    }
    else if ($i > 5)
    {
        //$dropContent[$j] .= "<a href='#Cat=$Category'><li class='channelCategory itemLink Text'>$Category</li></a>";
        $dropContent[$j] .= $Category;
        $j++;
    }
    $i++;
}

我的问题:当类别为默认时，如何更改第一个LI的颜色？另外，在查看第一个 LI 时，如何更改它的颜色？

任何帮助将不胜感激。

谢谢。

编辑:感谢所有试图帮助我的人。我不明白为什么我的代码不起作用，但我已经实现了一个解决方法:当添加第一个 li 时，我向其 anchor 标记添加一个唯一的类名 - 并选择第一个 li 我只是在搜索它类(class)名称。

Answer 1

尝试替换id至class在标签 <a> (带有 id 的 jQuery 选择器始终获取第一项)然后尝试添加/删除类( $( ).addClass('firstDefault') 并使用 css 更改颜色。

调试它，var Cat真的有“默认”值吗？