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，樣式表更新僅適用於一次

回答

相關問題