请记住切换状态 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 名称...

$.cookie('divState')

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