在实现cookie保存状态到JQuery切换时遇到麻烦

Having trouble implementing cookie save state to JQuery toggle

本文关键字：遇到 麻烦 JQuery 实现 cookie 保存 状态      更新时间：2023-09-26

我一直在Nicolas R的帮助下想出一个JQuery切换开关，使用cookie保存切换开关的状态，但我目前在实现它时遇到了麻烦，因为它为所有激活的按钮拉入相同的标题。

HTML: 

<div>
    <a href="#" id="slide1">Slide Toggle +</a>
    <div id="slide1panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
<div>
    <a href="#" id="slide2">Slide Toggle +</a>
    <div id="slide2panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
JQuery 

$(document).ready(function() {
    // check the cookies when the page loads
    // 1st panel
    if ($.cookie('currentToggleslide1panel') === 'visible') {
        togglePanel($('#slide1panel'), $('#slide1'), true, 0);
    }
    // 2nd panel
     if ($.cookie('currentToggleslide2panel') === 'visible') {
        togglePanel($('#slide2panel'), $('#slide2'), true, 0);
    }    
    //handle the clicking of the show/hide toggle button of the 1st panel
    $('#slide1').click(function() {
        //toggle the panel as required, base on current state
        if ($('#slide1').text() === "Slide Toggle +") {
            togglePanel($('#slide1panel'), $('#slide1'), true, 'slow');
        }
        else {
            togglePanel($('#slide1panel'), $('#slide1'), false, 'slow');
        }
    });
     //handle the clicking of the show/hide toggle button of the 2nd panel
    $('#slide2').click(function() {
        //toggle the panel as required, base on current state
        if ($('#slide2').text() === "Slide Toggle +") {
            togglePanel($('#slide2panel'), $('#slide2'), true, 'slow');
        }
        else {
            togglePanel($('#slide2panel'), $('#slide2'), false, 'slow');
        }
    });
});
function togglePanel(panel, button, show, toggleSpeed) {
    if(toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
        panel.slideToggle(toggleSpeed);
    } else {
        panel.toggle();
    }
    if (show) {
        // Set a cookie containing the panel name
        $.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
        button.text('Slide Toggle -');
    } else {
        // Set a cookie containing the panel name
        $.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
        button.text('Slide Toggle +');
    }
}

JS小提琴

谢谢!

Cozmoz

我更新了引用cookie脚本在你的JS小提琴(见外部资源):它似乎现在工作。当我第一次尝试的时候，饼干引起了一个bug。文字是独立变化的，你能检查一下小提琴是否有问题吗?

编辑:新响应:面板之间的文本是不同的，在这个示例中，我使用当前文本并将最后一个字符替换为加减号

http://jsfiddle.net/xVa7e/6/

$(document).ready(function() {
    // check the cookies when the page loads
    // 1st panel
    if ($.cookie('currentToggleslide1panel') === 'visible') {
        togglePanel($('#slide1panel'), $('#slide1'), 0);
    }
    // 2nd panel
     if ($.cookie('currentToggleslide2panel') === 'visible') {
        togglePanel($('#slide2panel'), $('#slide2'), 0);
    }    
    //handle the clicking of the show/hide toggle button of the 1st panel
    $('#slide1').click(function() {
        //toggle the panel as required
        togglePanel($('#slide1panel'), $('#slide1'), 'slow');
    });
     //handle the clicking of the show/hide toggle button of the 2nd panel
    $('#slide2').click(function() {
        //toggle the panel as required
        togglePanel($('#slide2panel'), $('#slide2'), 'slow');
    });
});
function togglePanel(panel, button, toggleSpeed) {
    var panelPreviousStateVisible = panel.is(':visible');
    // Toggle the div
    if (toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
        panel.slideToggle(toggleSpeed);
    } else {
        panel.toggle();
    }
    // Once toggled, set the cookie and the text
    if (!panelPreviousStateVisible) { 
        $.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
        // Set the text by removing the last char and add a minus symbol
        button.text(button.text().slice(0,-1) + "-");
    } else {
         $.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
        // Set the text by removing the last char and add a plus symbol
        button.text(button.text().slice(0,-1) + "+");
    }
}
相关文章：