记住切换状态JavaScript冲突

Question

我使用javaScript来记住页面刷新后的切换状态。

对于一个选项(添加名称)，代码运行良好，但是当我添加另一个选项(添加电话)并更改第二个选项的变量时，就会出现冲突。

如果我有一个选项‘可见’和其他‘隐藏’，那么他们将成为可见后，页面刷新。

我认为我没有正确地写好javaScript。

码

<div class="toggle-1">
    <a>Add name</a>
    <div class="inner-1">
       <br>
        <legend>Name</legend>
        <input type="text">
    </div>
</div>
    <br> <br> <br>

<div class="toggle-2">
    <a>Add phone</a>
    <div class="inner-2">
       <br>
        <legend>code</legend>
        <input type="text">
    </div>
</div>

​

    $(function (){
        var toggle1=$('.toggle-1');
        var inner1=toggle1.find('.inner-1');
        if($.cookie('divState')=='visible')
            inner1.show();
        else
            inner1.hide();
        toggle1.find('a').click(function(){
            if(inner1.is(':visible'))
                $.cookie('divState', 'hidden');
            else
                $.cookie('divState', 'visible');
            inner1.toggle();
        });
    });


     $(function (){
        var toggle2=$('.toggle-2');
        var inner2=toggle2.find('.inner-2');
        if($.cookie('divState')=='visible')
            inner2.show();
        else
            inner2.hide();
        toggle2.find('a').click(function(){
            if(inner2.is(':visible'))
                $.cookie('divState', 'hidden');
            else
                $.cookie('divState', 'visible');
            inner2.toggle();
        });
    });

Answer 1

你两个都用同样的饼干名字..。

$.cookie('divState')

您需要给它们不同的名称，否则您将覆盖原始值