Question

我有一个工作脚本，可以添加背景颜色并保存本地存储空间。我想将其转换为addClass。我不知道任何JS。将.css更改为.addClass时遇到的问题是它不会删除以前选择的背景颜色。获得身体类=“c-wit c-rood c-ori”

不知怎的，它在Stackoverflow上不起作用。但也许有人知道如何删除body类并添加新的类。

if (localStorage.getItem("background") != null) {
  getColour = localStorage.background;
  $('body').css('background', getColour);
}

$(".c-ori").click(function () {
  setColour = '#0c1534';
  localStorage.removeItem('background');
  $('body').css('background', setColour);
  localStorage.setItem("background", setColour);
});	
$(".c-wit").click(function () {
  setColour = '#fff';
  localStorage.removeItem('background');
  $('body').css('background', setColour);
  localStorage.setItem("background", setColour);
});	
$(".c-rood").click(function () {
  setColour = '#B71C1C';
  localStorage.removeItem('background');
  $('body').css('background', setColour);
  localStorage.setItem("background", setColour);
});

*{box-sizing:border-box;}

html{color:#fff; height:100%;}
body{background:#0c1534; margin:0; padding:0; height:100%; transition:0.5s;}

.kleur{text-align:center; position:fixed; top:10px; left:15px; z-index:1; height:30px; color:#fff; font-size:8px; font-family:arial;}
.kleur div{width:18px; height:18px; line-height:16px; border:1px solid #fff; margin:5px 2px; display:inline-block; cursor:pointer; border-radius:100%; }

.c-ori{background:#0c1534;}
.c-wit{background:#ffffff; color:#000;}
.c-rood{background:#B71C1C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="kleur">	
	<div class="c-ori">1</div> 
	<div class="c-wit">2</div> 
	<div class="c-rood">3</div> 
</div>

Answer 1

您还应该使用removeClass删除以前的类名，并使用addClass添加新的类名。

此外，在css文件中添加classname并添加相关背景。有关更多信息，请参阅 removeClass addClass

Answer 2

也许是这样的？它将覆盖body元素的类名

if (localStorage.getItem("background") != null) {
  getColour = localStorage.background;
  document.body.className = getColour;
}

$(".c-ori").click(function () {
  setColour = "c-ori"
  document.body.className = setColour
  localStorage.setItem("background", setColour);
});

LocalStorage点击添加/删除课程

2 个答案: