jquery cookies and Legend state

本文关键字：state Legend and cookies jquery 更新时间：2023-09-26

我使用这段代码来激活取消激活字段集和jquery cookie插件的内容，除了传说的状态，它总是返回为未选择，这反过来设置字段集内的元素禁用。

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的状态?

编辑:

我很接近，我可以通过检查它的背景颜色来获得传说的"状态"…但是我不能设置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});
        }
    });
});

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

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

喝了一两杯啤酒后，我终于想通了。我将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});
    });
});