Javascript 隐藏/显示特定内容并另存为本地存储
我希望使用一个引导开关来隐藏和显示特定的内容,这取决于它是否被选中。我想将此复选框的状态保存在localstorage中。我是javascript新手,无法理解它。如果能给我任何帮助,我将不胜感激 。我也会将代码粘贴到这里。谢谢你Javascript 隐藏/显示特定内容并另存为本地存储,javascript,jquery,local-storage,bootstrap-switch,Javascript,Jquery,Local Storage,Bootstrap Switch,我希望使用一个引导开关来隐藏和显示特定的内容,这取决于它是否被选中。我想将此复选框的状态保存在localstorage中。我是javascript新手,无法理解它。如果能给我任何帮助,我将不胜感激 。我也会将代码粘贴到这里。谢谢你 <div class="well text-center"> <h1>Today's Games</h1> <br> <input type="checkbox" name="spoiler-check
<div class="well text-center">
<h1>Today's Games</h1>
<br>
<input type="checkbox" name="spoiler-checkbox" data-size="mini" data-on-color="danger">
<br />
<label for="checkbox">Spoiler-Free</label>
</div>
<div class="col-xs-4 col-xs-offset-4">
<table class="table table-bordered" id="Game1">
<thead>
<tr>
<th class="status" colspan="3" id="timeleft">3:31 3rd Quarter</th>
<th class="status" colspan="3" id="starttime">7:30pm EST</th>
</tr>
</thead>
<tbody>
<tr>
<td class="team" colspan="2">Bulls</td>
<td class="score" colspan="1">59</td>
</tr>
<tr>
<td class="team" colspan="2">Bucks</td>
<td class="score" colspan="1">65</td>
</tr>
</tbody>
</table>
</div>
更新: K、 在多方面的帮助下,我的工作非常顺利。虽然不是最干净的代码,但它完全符合我的要求
是的,您可以使用带有set和get方法的localStorage完美地保存和检索状态。只需在
switchChange.bootstrapSwitch
上放置一个侦听器,然后每次更改localStorage
上的值,然后每次加载页面时进行简单验证,查看localStorage
上是否存储了任何值
请注意,值存储为字符串,因此,它们应转换回其类型,在本例中为布尔值。
这是您最新的完整小提琴:
谢谢加布里埃尔,这是一个很好的开始。。。隐藏和显示特定的类/id如何。。。我不确定这段代码是怎么写的?再次感谢您什么意思?…您指的是jQuery选择器?。是的,您可以通过多种方式中的任何一种指向任何元素:名称、id、类等:好的,我让它在第一次切换时隐藏/显示我需要的内容,但我不知道如何使它回到切换时的状态。。。非常感谢您的帮助。非常感谢你。我对这个很陌生
#timeleft {
color:red;
}
#starttime {
display:none;
}
.team {
font-weight: 700;
}
$("[name='spoiler-checkbox']").bootstrapSwitch();
$( document ).ready(function() {
//Set the listener to store data on localstorage whenever event switch is fired
$("[name='spoiler-checkbox']").on('switchChange.bootstrapSwitch', function(event, state) {
if (localStorage)
localStorage.setItem("ckbspoiler", state); //ckbspoiler is just the name you want
});
// retrieve the localstorage value for ckbspoiler and set the last saved status if any
var lastState = null;
if (localStorage)
lastState = (localStorage.getItem("ckbspoiler") === "true"); //Notice we are using this to convert it to its natural type: boolean
//If there was a lastState saved, then update the checkbox status
if(lastState != null) $("[name='spoiler-checkbox']").prop('checked', lastState);
$("[name='spoiler-checkbox']").bootstrapSwitch();
});