0

该脚本改编自这里的一位用户，但是一旦我添加了与文本框绑定的复选框，它就无法正常工作。

例如，来自http://jsfiddle.net/TzPW9/315/一旦我点击问题 2 中的“其他”选项，无论我如何更改答案，它都会卡住，一旦我刷新它会自动返回到“其他”选项。最有可能的问题是从这条线开始

PS我的javascript真的很糟糕。

谢谢您，我将不胜感激！

    $('div.radio_button input:radio').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).attr('checked', 'checked');
        if (val == 'not')
            $(this).removeAttr('checked');
        if (val)
            $(this).trigger('change');
    });
4

2 回答 2

0

原因

一个原因是这一行：

$(this).attr('checked', 'checked');

改用这个：

$(this).prop('checked', true);

另一个原因是，例如，当您在单选按钮中设置第二个选项时，您不会删除（或清除）存储中的先前状态。

然后发生的是 f.ex （动作伪） -

设置选项 1（您的 31a）：

set(31a, checked)

然后你加载它，因为它可以工作。

get(31a = checked)
get(32b = null)

现在设置选项二：

set(31b, checked);

现在加载并发生这种情况：

get(31a = checked)
get(32b = checked)

一个单选按钮只需要设置一个选项，因此它被迫选择一个并且会选择最后一个。这就是为什么总是设置最后一个选项的原因。

解决方案

当您更改选项时，您需要删除（或清除）前一个选项。

最简单的方法是清除存储并重新保存所有选项。但是，这对用户来说并不明显（除非您要保存数千个项目）。

第二种方法将要求您跟踪单选按钮组的分组，并在该组中的选项更改时相应地设置所有值。如果您使用不同的形式并用于Object.keys(localStorage)遍历键以比较前缀（或 cookie 的类似功能），则可以使用单独的前缀。

使用蛮力方法更新存储的工作版本：http:
//jsfiddle.net/AbdiasSoftware/TzPW9/317/

function updateAll() {
    localStorage.clear(); //brute-force here..
    $('div.radio_button input').each(function () {
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    });
}

触发它的代码：

$('div.radio_button input:radio').bind('change', function () {
    $('#' + this.id + 'box').toggle($(this).is(':checked'));
    // save the data on change
    updateAll();
    //storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
});

当然，你需要对 cookie 做同样的事情，所以最好的选择可能是在你的存储对象上合并一个“清除”方法。

于 2013-06-21T06:51:42.370 回答
0

经过一些调整，我设法解决了本地存储问题，这不是一个非常聪明的方法，但它确实有效......我还没有解决 cookie 问题

我的盒子的 id 按页码工作。其次是问题号。后跟选项

因此 31a 是第 3 页问题 1 选项 A 所以我设法去掉最后一个字母并删除 '31' 中的所有内容

    jQuery(function($) {
    // a key must is used for the cookie/storage
    var prefix = 'com_hop_boxes_';
    var storedData = getStorage(prefix);

    $('div.check_box input:checkbox').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).attr('checked', 'checked');
        if (val == 'not')
            $(this).removeAttr('checked');
        if (val)
            $(this).trigger('change');
    });
    $('div.radio_button input:radio').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));

        var sch = prefix + this.id;
        sch = sch.slice(0, -1);
        var sch = new RegExp(sch);

        Object.keys(localStorage)
                .forEach(function(key) {
            if (sch.test(key) && !(/box$/.test(key))) {
                localStorage.removeItem(key);
            }
        });

        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).prop('checked', true);
        if (val)
            $(this).trigger('change');
    });
    $('.addtext').bind('change', function() {
        storedData.set(this.id, $(this).val());
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        $(this).val(val);
    });
于 2013-06-23T13:00:48.830 回答