jQuery和LESS，样式表更新仅适用于一次

试图更新自定义CSS href，该功能第一次正常工作，但在后续更新中不会发生页面更改。我可以在Chrome调试器中看到href更新，因此事件正在触发，LESS不会抛出任何错误，但颜色不会再次更新。jQuery和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” 按钮 - >链接的href = “/内容/主题/ customizable_green.less.css” - > ThemeBox变绿。

点击“Red CSS”按钮 - > link href =“/ Content/themes/customizable_red.less.css” - > ThemeBox变为红色。

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

我怀疑这是与.LESS缓存，这就是为什么我添加了localStorage.clear（）电话，但既没有，也不less.refresh（真）有解决了这个问题。

有什么想法？

来源

2012-05-02 kmunky

顺便说一句，在href中添加一个随机种子也无济于事。 /Content/themes/customizable_blue.less.css?4167=noworky – kmunky

不需要一个.less扩展吗？ –

VS/IIS7对于.less扩展名不太好。我已经添加了MIME类型，但IIS不会提供它们。无论如何，无论如何，.less.css都带着幸福的一面，而LESS似乎完全满足于它。这不是说LESS不是编译 - 它是;这是我无法改变的href，然后再回来。 – kmunky

这是由于LESS似乎工作的方式。它解析较少的文件，然后将 a style属性添加到DOM。在实践中，这些似乎遵循下列

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

你没有看到它回去是因为少解析您的内容，发现现有的样式块，而不是将它的原因的格式。在head的末尾添加后续样式块，以便获取样式的“最后”版本。

的功能更改为以下：

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

，你应该看到它的功能你想要的方式。

来源

2012-05-02 23:04:57

工作就像魅力，基兰。好奇你如何确定最终的DOM标记？我在Chrome调试器中监控，并没有看到。另外，您是如何确定LESS生命周期的？我搜索了dotlesscss-和lesscss.org，并没有在任何地方看到该文档。 Muchos gracias。今天备我几百布洛芬。 – kmunky

@kmunky我在inetpub/wwwroot下创建了一个虚拟目录，并在那里复制了你的代码。我在Chrome中监视了HTML元素标签，同时点击左右。这可能会或可能不会无限期地持续下去，但现在似乎是一致的。正如你所说，文件上的数据令人不安。 –

啊，我现在看到了风格标签！好了。 – kmunky

jQuery和LESS，样式表更新仅适用于一次

回答

相关问题