提交HTML表单后恢复UI状态

Question

实际上，我正在使用jquery在ul下动态创建列表项。

$.each(alltags.departments,function(){
   $("#specialitycenters").append('<li>'+this+'</li>');
});

这里的specialitycenters是我的ul id。我使用我的alltags.departments（来自ajax调用）添加列表项。

每当我们点击列表项时，我都会添加"选定"类。如果有10个列表项，并且我已经点击了3个li，那么我正在将类"选定"添加到这3个li中。

var lis = $('.list ul#specialitycenters li').click(function(e){
if(!e.ctrlKey) {
    // Ctrl not pressed, clear previous selections
     lis.removeClass("selected");      
}
$(this).addClass("selected");    
});
});

现在，当我提交表单时，这些动态添加的类正在恢复。但即使在单击提交按钮后，我也需要将"选定"类保留在单击的列表项中。我怎样才能做到这一点？

Answer 1

之所以会发生这种情况，是因为当您提交表单时，浏览器会将数据提交到服务器，并加载数据发送到的页面的全新版本。

你有两个选择：

1. 不要提交表单，使用Ajax将数据发送到服务器（最好的选择是这样做）
2. 在提交表单之前，使用Cookie或本地存储等将一些有关UI状态的数据存储在浏览器中，提交表单，使用存储的数据重置UI（你可以，但不能，这就是ajax的作用…）