0

現在、サイトのフォントを変更するためのドロップダウンに取り組んでいます。現在、ドロップダウンからいくつかの異なるフォントを利用できます。ドロップダウン セクションの 1 つがクリックされたときに呼び出されるコードは次のとおりです。

jQuery(function($) {
if ( localStorage.getItem('font-01') ) {
    $('#font-css-01').prop('disabled', localStorage.getItem('font-01') == 'true');
}

$('#font-selector-01').on('click', function() {
    $('#font-css-01').prop('disabled', function(_, prop) {
        localStorage.setItem('font-01', !prop);
        return !prop;
    });
});
});

さて、このスクリプトはフォント オプションごとに繰り返されます (当然、末尾の数字だけが変更されます)。ただし、新しいフォントの選択を有効にするときに、以前のフォントの選択を無効にするスクリプトが必要です。現在、ユーザーがデフォルト以外のフォントを選択してから別のデフォルト以外のフォントを選択すると、予期しない動作が発生する可能性があります (たとえば、font-01 を選択してから font-02 を選択します)。本質的に、このスクリプトを拡張する方法がわからないため、新しい選択肢を適用する前に以前の選択肢をリセットします。

この関数は、さまざまなフォントのスタイルシート ID をターゲットにしており、ドロップダウンの.prop()サブアイテムは.#font-selector-01$font-selector-n

4

1 に答える 1

1

の代わりにlinkタグを使用するには:data-fidid

<link data-fid='01' href='...' rel='...' disabled>
<link data-fid='02' href='...' rel='...' disabled>

ご覧のとおり、デフォルトでは無効になっているはずです。
クラスfont-selector-cと属性data-fid='xx'をそれぞれに追加しますli。次にコード：

$('.font-selector-c').on('click', function() {
    var fid = $(this).data('fid')
    $('link[data-fid]').prop('disabled', true) // disable all the stylesheets
    $('link[data-fid="' + fid + '"]')
        .prop('disabled', false) // enable one needed
    localStorage.setItem('font', fid) // save the id of the selected
});
$('#font-selector-reset').on('click', function() {
    $('link[data-id]').prop('disabled', true) // disable all the stylesheets
    localStorage.setItem('font', null) // remove saved id
});

// On start: recalling user's choice
var c_fid = localStorage.getItem('font')
if (c_fid)
    $('link[data-fid="' + c_fid + '"]').prop('disabled', false)
于 2013-11-29T05:06:57.187 に答える