替换复杂标题中的样式表

Question

我有一个需要为其创建样式表切换器的网站。现在，当涉及到 html/css/js 的所有内容时，我几乎是自学的，所以请提前原谅我的新手。我修改了一些代码以满足我的需要，但我似乎找不到如何更改代码以针对头部的特定行。

目前这是我所拥有的：

<ul id="nav">
    <li><a href="#" rel="http://files.enjin.com/149304/theme-dark.css">Dark</a></li>
    <li><a href="#" rel="http://files.enjin.com/149304/theme-light.css">Light</a></li>
</ul>

<script>
$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        return false;
    });
});

$(document).ready(function() { 
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
    }
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});

$(document).ready(function() { 
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
    }
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});
</script>

就目前而言，这段代码只是改变了头部的每个href并破坏了页面。

这是我需要更改的 href（它位于第 22 行）：

<link href="./Home - Oceanian Gaming Community_files/theme.php" media="screen" rel="stylesheet" type="text/css">

非常感谢任何帮助。

Answer 1

你不能通过源代码中的行号来遍历 DOM 元素。

您需要使用某种技术来区分需要更改的链接标签。一个简单的建议是使用自定义属性。

例如：

<link xtype="1" href="./Home - Oceanian Gaming Community_files/theme.php"  ... >

现在，您可以通过选择器引用它并轻松操作它。

$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link[xtype="1"]").attr("href", $(this).attr('rel'));
        return false;
    });
});

以上是您为此目的唯一需要的就绪处理程序。

---

一个稍微冒险的解决方案是使用属性包含选择器来匹配特定的链接标签。风险在于，这可能会匹配多个链接标签，具体取决于您页面上的内容。

$("link[href*="/theme.php"]")

---

编辑查看网站后：

好的，所以有几件事是不正确的。

首先，引号是错误的 - 你需要 $('link[href*="/theme.php"]') 即单外，双内的模式（反之亦然，但不是同一个两个地方）。

其次，在您更改一次后，模式 href*="/theme.php" 将不会再次匹配，因为我们已经更改了 href 属性。因此，在您第一次更改 href 时添加一个自定义属性，并从第二次开始使用此自定义属性来匹配您的链接标签。

if($('link[xtype]').length == 0) {
    // first time - set href and add custom attribute
    $('link[href*="/theme.php"]').attr("href", $(this).attr('rel')).attr('xtype', 1);
}
else {
    // second time on wards
    $('link[xtype]').attr("href", $(this).attr('rel')).attr('xtype', 1);
}