我有两个div，其中一个有is-active类，我试图实现的是，当用户单击div时，它给他们active class is saved value in localstorage，因此当用户重新加载页面时，它需要在他单击的div上有active class。 这是我的密码
null
jQuery(document).ready(function($) {
if (localStorage.getItem('user') == 'aaa') {
$(".form-wrapper").addClass("is-active");
}
$('.student').click(function() {
localStorage.setItem('user', 'student');
;
$('.form-wrapper').removeClass('is-active');
$(this).addClass('is-active');
});
$(".teacher").click(function() {
localStorage.setItem('user', 'teacher');
$('.form-wrapper').removeClass('is-active');
$(this).addClass('is-active');
});
});.is-active {
background-color:red;
width:40px;
height:40px
}
.teacher {
background-color:gray;
width:40px;
height:40px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper student is-active">
</div>
<div class="form-wrapper teacher">
</div>null
这段代码工作得很好，除了一点，当我单击教师div时，它通过is-activeclass，我可以在localStorage中看到value，但是当我刷新页面时，active class消失了，而value在loaclstorage中。
有人能帮我吗？
我对代码做了一些修改
jsfiddle演示
null
jQuery(document).ready(function($) {
if (localStorage.getItem('user') == 'student') {
$(".form-wrapper div").removeClass("is-active");
$(".form-wrapper .student").addClass("is-active");
}
if (localStorage.getItem('user') == 'teacher') {
$(".form-wrapper div").removeClass("is-active");
$(".form-wrapper .teacher").addClass("is-active");
}
$('.student').click(function() {
localStorage.setItem('user', 'student');
$('.form-wrapper div').removeClass('is-active');
$(this).addClass('is-active');
});
$(".teacher").click(function() {
localStorage.setItem('user', 'teacher');
$(".form-wrapper div").removeClass("is-active");
$(this).addClass('is-active');
});
}); .is-active {
background-color:red !important;
width:40px;
height:40px
}
.teacher, .student {
background-color:gray;
width:40px;
height:40px
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper ">
<div class="student is-active"></div>
<div class="teacher"></div>
</div>
使用jQuery，您可以执行以下操作:
HTML标记:
<div class="text-center">
<h2>Who are you?</h2>
<div class="form-wrapper" data-user="student">
Student
</div>
<div class="form-wrapper" data-user="teacher">
teacher
</div>
</div>
CSS样式:
body {
font: normal 15px/1.5 sans-serif;
color: #555;
}
.text-center {
text-align: center;
}
.form-wrapper {
display: inline-block;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.form-wrapper:hover, .form-wrapper.is-active {
border-color: red;
}
JS:
$('.form-wrapper').click(function(){
let dataUser = $(this).data('user');
$('.form-wrapper.is-active').removeClass('is-active');
$('.form-wrapper[data-user='+dataUser+']').addClass('is-active');
localStorage.setItem('user',dataUser);
});
if(localStorage.getItem('user') !== null){
$('.form-wrapper[data-user='+localStorage.getItem('user')+']').addClass('is-active');
}
我不知道默认情况下是否需要一个活动类集？
jQuery小提琴
如果没有jQuery，应该可以执行以下操作:
let formWrappers = document.getElementsByClassName('form-wrapper');
console.log(formWrappers)
for(let i = 0; i < formWrappers.length; i++){
formWrappers[i].addEventListener('click', function() {
let dataUser = this.dataset.user;
localStorage.setItem('user',dataUser);
if(document.querySelector('.is-active')){
document.querySelector('.is-active').classList.remove('is-active');
this.classList.add('is-active');
}else {
this.classList.add('is-active');
}
});
}
if(localStorage.getItem('user') !== null){
document.querySelector('[data-user='+localStorage.getItem('user')+']').classList.add('is-active')
}
香草小提琴
