1

カスタム CSS href を更新しようとすると、最初は正常に機能しますが、その後の更新ではページに変更が発生しません。Chrome デバッガーで href が更新されていることを確認できるので、イベントが発生し、LESS はエラーをスローしていませんが、2 回目は色が更新されません。

コードの一部を次に示します (読みやすくするために連結しています。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 を変更すると、再度元に戻すと、新しい値は再描画されません。

例：

「Green CSS」ボタンをクリック -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox が緑色に変わります。

"Red CSS" ボタンをクリック -> link href="/Content/themes/customizable_red.less.css" -> ThemeBox が赤色に変わります。

"Green CSS" ボタンをクリック -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox は赤のままです。

これは .less キャッシングと関係があると思われるため、localStorage.clear()呼び出しを追加しましたが、それもless.refresh(true)も問題を解決していません。

何かご意見は？

4

1 に答える 1

4

これは、LESS が動作しているように見える方法によるものです。less ファイルを解析し、属性を DOM に追加します。style実際には、これらは次の形式に従うようです

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

そして、あなたはそれがあなたが望むように機能するのを見るはずです.

于 2012-05-02T23:04:57.483 に答える