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;
    });
});

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

风险稍大的解决方案是使用attribute-contains选择器来匹配特定的链接标记。风险在于，这可能会匹配多个链接标记，具体取决于您在网页上的内容。

$("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);
}

替换复杂标题中的样式表

1 个答案: