我在同一页面上有30个同一个班级的div。当我按下标题(.pull)时,内容会向上滑动(.toggle_container)。当内容被隐藏并且我再次按下标题时,内容将向下滑动。此外,我想将div状态存储在cookie中。 我修改了原始代码以将div状态存储在cookie中,但它不适用于所有div(pull1,toggle_container1,pull2,toggle_container2 [...]),它仅适用于第一个(pull0,toggle_container0)。 我做错了什么?
var increment = 0;
if ($.cookie('showTop') == 'collapsed') {
$(".toggle_container" + increment).hide();
}else {
$(".toggle_container" + increment).show();
};
$("a.pull" + increment).click(function () {
if ($(".toggle_container" + increment).is(":hidden")) {
$(".toggle_container" + increment).slideDown("slow");
$.cookie('showTop', 'expanded');
increment++;
} else {
$(".toggle_container" + increment).slideUp("slow");
$.cookie('showTop', 'collapsed');
increment++;
}
return false;
});
答案 0 :(得分:1)
我没有尝试过你的任何代码, 但不会$(“a.pull”+增量)= $(“a.pull0”)? 并且我没有看到任何for循环因此增量0选择器是唯一将被执行的选择器?
要查看的jquery选择器可能是 http://api.jquery.com/attribute-starts-with-selector/ 如果您可以选择具有以.pull(或其他)开头的类的div,而不必绑定到30个不同的div,那么我认为您的代码将更具性能。
答案 1 :(得分:1)
这是代码:
$('div.toggle_container').each(function() { // Initialise
var index = this.id.replace(/^\D+/, '');
$(this).toggle($.cookie('showTop' + index) == 'collapsed');
});
$('a.pull').click(function() { //Activate
var index = this.id.replace(/^\D+/, '');
if ($.cookie('showTop' + index) == 'collapsed') {
var container = $('#toggle_container' + index).slideDown('slow');
$.cookie('showTop' + index, container.is(':hidden') ? 'collapsed' : 'expanded');
}else {
var container = $('#toggle_container' + index).slideUp('slow');
$.cookie('showTop' + index, container.is(':visible') ? 'expanded' : 'collapsed');
}
});