[英]Having trouble implementing cookie save state to JQuery toggle
我一直在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小提琴中更新了引用的cookie腳本(請參閱外部資源):它現在可以正常工作。 當我第一次嘗試時,cookie引起了錯誤。 文本獨立變化,您可以檢查小提琴中是否有錯誤?
編輯:新的答復:面板之間的文本不同,在此示例中,我使用當前文本,並用加號/減號替換最后一個字符
$(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) + "+");
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.