记得切换状态JavaScript冲突

Question

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

代码对于一个选项（添加名称）工作正常，但是当我添加另一个选项（添加 phone）并更改第二个选项的变量时，出现了冲突。

如果我有一个选项 'visible' 和另一个选项 'hidden' 那么它们都将在页面刷新后可见。

我觉得我没把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')

你需要给它们不同的名字，否则你会覆盖原来的值

记得切换状态JavaScript冲突

Remember toggle state JavaScript conflict

javascript

toggle