jquery cookie 和 Legend 状态

Question

我正在使用此代码来激活禁用字段集的内容和 jquery cookies 插件，除了图例的状态外，它可以正常工作，它总是以未选中状态返回，这又将元素设置在字段集中禁用。

function activeLegend(){                                                                               
  var legendId=this.id
  var fsId=$(this).closest('fieldset').prop('id')
  var inputs=$('#'+fsId).find(':input')

  inputs.each(function(){
    if ($(this).is(':disabled')){
        $('#'+legendId).css('background-color', '#6b0000');
        $('#'+fsId+' :input').prop('disabled', false);
        $('#'+fsId+' input:checkbox').button('enable');
        $('#'+fsId+' input:radio').button('enable');
        return false;
    }else{
        $('#'+legendId).css('background-color', '#b20000');
        $('#'+fsId+' :input').prop('disabled', true);
        $('#'+fsId+' input:checkbox').button('disable');
        $('#'+fsId+' input:radio').button('disable');   
        return false;
    };
  }); 
};

如何设置 cookie 来记住 Legend 的状态？

编辑：

我很接近，我可以通过检查它的背景颜色来获取图例 'state'...但是我无法设置 cookie 来记住颜色所以它总是恢复到它是原始状态...我做错了什么？

$(function(){                                                                                       
    var legend=$('.setCookies').find('.activeLegend');

    legend.each(function(){
        $(this).css('background-color', $.cookie(this.id));
    });

    legend.click(function(){
        var fsId=$(this).closest('fieldset').prop('id')
        var legendId=this.id

        if ($('#'+legendId).css('background-color')=='rgb(178, 0, 0)'){
            $('#'+legendId).css('background-color', '#6b0000');
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
            $.removeCookie(this.id);
        }else{
            $('#'+legendId).css('background-color', '#b20000');
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
            $.cookie(this.id, {expires: 365});
        }
    });
});

Answer 1

我不确定你想在哪里设置图例状态，但你可以这样做：

inputs.each(function(){
    var element = $(this);
    var id = element .attr('id');
    $.cookie(id, element.text());
    if ($(this).is(':disabled')){
        $('#'+legendId).css('background-color', '#6b0000');
        $('#'+fsId+' :input').prop('disabled', false);
        $('#'+fsId+' input:checkbox').button('enable');
        $('#'+fsId+' input:radio').button('enable');
        return false;
   }else{
       $('#'+legendId).css('background-color', '#b20000');
       $('#'+fsId+' :input').prop('disabled', true);
       $('#'+fsId+' input:checkbox').button('disable');
       $('#'+fsId+' input:radio').button('disable');   
       return false;
   }
 });

Answer 2

喝了一两杯啤酒后，我终于弄明白了。我将 click() 函数与设置 cookie 相结合。

$(function(){                                                                                       
    var legend=$('.setCookies').find('.activeLegend');

    legend.each(function(){
        var legendId=this.id;
        var fsId=$('#'+legendId).closest('fieldset').prop('id');

        $(this).css('background-color', $.cookie(legendId));
        if ($('#'+legendId).css('background-color')=='rgb(178, 0, 0)'){
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
        }else{
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
        };

    });

    legend.click(function(){
        var fsId=$(this).closest('fieldset').prop('id');
        var legendId=this.id;

        if ($('#'+legendId).css('background-color')=='rgb(107, 0, 0)'){
            $('#'+legendId).css('background-color', '#b20000');
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
        }else{
            $('#'+legendId).css('background-color', '#6b0000');
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
        };
        $.cookie(legendId, $(this).css('background-color'), {expires: 365});
    });
});

jquery cookie 和 Legend 状态

jquery cookies and Legend state

javascript

jquery

cookies

legend