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

【问题标题】：jQuery and Local Storage: Selector with Multiple StatesjQuery 和本地存储：具有多种状态的选择器
【发布时间】：2013-11-28 22:35:52
【问题描述】：

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

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

现在，这个脚本会针对每个字体选项重复（显然只有结尾数字发生了变化）。但是，我需要脚本在启用新字体选择时禁用任何以前的字体选择；目前，当用户选择非默认字体，然后选择 another 非默认字体（例如，选择 font-01，然后选择 font-02）时，可能会出现意外行为。本质上，我不确定如何扩展此脚本，因此它会在应用新选择之前重置以前的选择。

.prop() 函数针对各种字体的样式表 ID，下拉菜单的子项连续标记为 #font-selector-01 到 $font-selector-n。

【问题讨论】：

标签： jquery css fonts local-storage prop

【解决方案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)

【讨论】：

这似乎不太奏效。这是我目前正在使用的 HTML 的链接（包括所有脚本的链接）：zyniker13.com/html-pages/…。正如您可能会说的那样，我正在尝试使页面顶部的下拉菜单充当字体选择器（也带有重置为默认按钮）。
@Zyniker 究竟应该发生什么？ prop disabled 在你看来是做什么的？
我打算让下拉菜单发挥作用：如果用户选择下拉菜单中的一种字体，我希望附加到它的 jQuery 禁用任何以前的字体选择（即重置为默认值）并同时激活新的字体选择；从代码的角度来看，这将包括确保禁用所有用于各种字体选择的附加样式表，除了用户选择的最后一个样式表。很明显，重置按钮只会禁用所有用于字体选择的附加样式表（即，将网站重置为默认字体/CSS）。
插入我的代码后，它的工作方式如下：当用户单击一个选项时，例如font-selector-03，本地存储中font-01 的值设置为03。（其实我在代码中写错了，应该是setItem('font', fid)。所以，现在选择了font-03。有什么问题？在默认按钮上再附加一个事件：localStorage.setItem('font', null)。
请在此处查看示例：zyniker13.com/html-pages/…。如您所见，字体下拉菜单的行为与预期不符。我不确定代码哪里出错了。