Question

尝试更新自定义CSS href，第一次正常工作，但在后续更新中，页面不会发生任何更改。我可以在Chrome调试器中看到href更新，因此事件正在触发，LESS没有抛出任何错误，但颜色第二次没有更新。

以下是一些代码（为了便于阅读而连接;注意我使用的是VS 2010，MVC4，因此 less.css 扩展名）：

<link href="/Content/themes/customizable_default.less.css" id="CustomCSS" rel="stylesheet/less" type="text/css">

        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_default.less.css">Default CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_green.less.css">Green CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_gray.less.css">Gray CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_blue.less.css">Blue CSS</a>

        <div class="ThemeBox">
            <div class="ThemeCompartment1">
                <h2>This is the title.</h2>
            </div>
            <div class="ThemeCompartment2">
                <p>A bunch of copy goes here.</p>
            </div>
        </div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        // choosing a template
        $('.ToggleButton').click(function (e) {
            $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') });
            localStorage.clear();
            less.refresh();
        });
    });

</script>

请注意，样式表链接位于标题中，因此所有标记在语义上都是正确的（当然，除了CssUrl属性之外）。如果我更改链接href，然后再返回，则不重新绘制新值。

示例：

点击“绿色CSS”按钮 - ＆gt; link href =“/ Content / themes / customizable_green.less.css” - ＆gt; ThemeBox变为绿色。

点击“红色CSS”按钮 - ＆gt; link href =“/ Content / themes / customizable_red.less.css” - ＆gt; ThemeBox变红了。

点击“绿色CSS”按钮 - ＆gt; link href =“/ Content / themes / customizable_green.less.css” - ＆gt; ThemeBox保持红色。

我怀疑这与.less缓存有关，这就是为什么我添加了 localStorage.clear（） 调用，但是既不是也不是 less.refresh（true） 已解决此问题。

有什么想法吗？

Answer 1

这是由于LESS的运作方式。它解析较少的文件，然后将<{em}} style属性添加到DOM。实际上，这些似乎遵循以下格式

<style type='text/css' id='less:<<NAME OF YOUR LESS FILE>>'> /*your parsed content*/ </style>

您没有看到它的原因是因为LESS正在解析您的内容，找到现有的样式块，而不是添加它。在head的末尾添加了后续的样式块，因此您可以获得样式的“最后一个”版本。

将您的功能更改为以下内容：

$('.ToggleButton').click(function (e) { $('style[id^="less:"]').remove(); $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') }); less.refresh(); });

你应该看到它按你想要的方式运作。

jQuery和LESS，样式表更新只能使用一次

1 个答案: