0

我目前正在研究用于更改网站字体的下拉菜单。目前，下拉菜单中有几种不同的字体可用。单击下拉部分之一时调用的代码如下：

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）时，可能会出现意外行为。本质上，我不确定如何扩展此脚本，因此它会在应用新选择之前重置以前的选择。

该.prop()函数针对各种字体的样式表 ID，并且下拉菜单的子项#font-selector-01通过$font-selector-n.

4

1 回答 1

1

对于link标签使用data-fid而不是id：

<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 回答