Question

我目前正在制作一个用于更改网站字体的下拉列表。目前，下拉列表中提供了一些不同的字体。单击其中一个下拉部分时调用的代码如下：

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

现在，对于每个字体选项重复此脚本（显然只更改了结束数字）。但是，我需要脚本在启用新字体选项时禁用任何以前的字体选择;目前，当用户选择非默认字体然后选择另一个非默认字体（例如，选择字体-01，然后选择字体-02）时，可能出现意外行为。从本质上讲，我不确定如何扩展此脚本，以便在应用新选择之前重置先前的选择。

.prop()函数定位各种字体的样式表ID，下拉列表的子项标记为#font-selector-01到$font-selector-n。

Answer 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)

jQuery和本地存储：具有多个状态的选择器

1 个答案: