如何在使用jquery刷新页面时激活div类

Question

我创建了一个jquery函数来隐藏或显示div中的内容，但每当我重新加载页面时，它就会变成隐藏的，任何解决方案，

$(document).ready(function(){
$('#myRadioGroup').change(function(){
var ress = $('#myRadioGroup input[name="cars"]:checked').val();
if (ress == 3) {
$('.desc').show();
$('.descc').hide();
}
else{
$('.desc').hide();
$('.descc').show();
}
});

})；

html代码在这里

<div id="myRadioGroup">
<input type="radio" name="cars" checked="checked" value="2">
<input type="radio" name="cars" value="3">
</div>
<div id="Cars2" class="descc">
2 Cars Selected
</div>
<div id="Cars3" class="desc" style="display: none;">
hello
</div>

Answer 1

我认为LocalStorage是最简单的解决方案之一。

我对您的JavaScript代码做了一些更改。

$(document).ready(function(){
function selectedDefaultValue() {
var localData = localStorage.getItem("selectedValue");
if(localData !== null) {
var radio = $('#myRadioGroup input[value="' + Number(localData) + '"]');
radio.prop('checked', true);
onChangeRadio();
}
}
function onChangeRadio() {
var ress = $('#myRadioGroup input[name="cars"]:checked').val();
if (ress == 3) {
$('.desc').show();
$('.descc').hide();
} else{
$('.desc').hide();
$('.descc').show();
}
localStorage.setItem("selectedValue", ress);
}
selectedDefaultValue();
$('#myRadioGroup').change(function(){
onChangeRadio();
});
});

此处的示例：https://codepen.io/yasgo/pen/KKgPyBo

Answer 2

刷新页面时，它会重置。为了避免这种情况，您需要持久化数据。有几种方法可以处理此问题：

• 本地存储
• Cookie
• URL查询参数
• API(存储在数据库或云服务中(

如果您正在处理敏感信息，使用API方法(在https://em>上(最符合您的利益。但假设这不是敏感信息，您可以使用前三种方法之一。由此，我觉得localStorage更容易。

Window.localStorage

此外，使用可读易懂的名称。总是假设有人正在浏览你的代码，他们不应该对此感到恼火。