Question

我想基于点击更改div的颜色。然后，我希望它记住刷新时的颜色。最后，我希望能够单击相同的div并将其颜色更改回原始颜色。

我设法创建了第一条和第二条陈述。

<div class="deurbody">
<div class="nooddeurknop btn-secondmenu">5</div>
<div class="nooddeurknop btn-secondmenu">4</div>
<div class="nooddeurknop btn-secondmenu">3</div>
<div class="nooddeurknop btn-secondmenu">2</div>
<div class="nooddeurknop btn-secondmenu">1</div>
</div>

$(".btn-secondmenu").css('background-color', localStorage.getItem(".btn-secondmenu"));
$(".btn-secondmenu").click(function () {
$(this).css('background-color', 'gray');
var status = $(".btn-secondmenu").css('background-color');
localStorage.setItem(".btn-secondmenu", status);
});

.deurbody {
    display: grid;
    grid-template-columns: 200px 80px;
    grid-template-rows: repeat(auto-fit, 60px);
    grid-row-gap: 7px;
    height:100%;

} 

.nooddeurknop:nth-child(odd) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:white;
    background: #FF5552;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

.nooddeurknop:nth-of-type(even) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:white;
    background: #E64C49;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

.nooddeurknop:nth-last-child(1) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:#E64C49;
    background: #272727;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

演示：https://jsfiddle.net/pyhrfq4z/

我希望能够将灰色div改回红色div。

我尝试了jquery的toggle属性，但这似乎不起作用。

Answer 1

我会通过切换课程并记住切换来做到这一点。所以：

.btn-secondmenu.special-color {
    background-color: gray;
}

然后

var className = "special-color";
$(".btn-secondmenu").toggleClass(className, localStorage.getItem(".btn-secondmenu") === "Y");
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    $this.toggleClass(className);
    if ($this.hasClass(className)) {
        localStorage.setItem(".btn-secondmenu", "Y");
    } else {
        localStorage.removeItem(".btn-secondmenu");
    }
});

或

var className = "special-color";
$(".btn-secondmenu").toggleClass(className, localStorage.getItem(".btn-secondmenu") === "Y");
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    $this.toggleClass(className);
    localStorage.setItem(".btn-secondmenu", $this.hasClass(className) ? "Y" : "N");
});

取决于在未设置特殊颜色时是否要使用本地存储密钥。

Updated fiddle

注意：您的原始代码将相同的本地存储密钥应用于页面加载时的所有div，因此我将其保留为原来的样子。如果希望它们独立切换，则有两种选择：

为每个div使用单独的键，或者
使用包含div标志的单个键

我倾向于有一些本地存储条目，而不是很多，因此我倾向于后者：

var className = "special-color";
var storageName = "colorToggleState";
var colorToggleState = JSON.parse(localStorage.getItem(storageName)) || {};
$(".btn-secondmenu").addClass(function() {
    var $this = $(this);
    var index = $this.index(); // Or use some other more reliable identification of the button
    if (colorToggleState[index]) {
        return className;
    }
});
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    var index = $this.index(); // Or use some other way of identifying the button
    colorToggleState[index] = !colorToggleState[index]; // `undefined` is falsy, so this works just fine
    $this.toggleClass(className, colorToggleState[index]);
    localStorage.setItem(storageName, JSON.stringify(colorToggleState));
});

Fiddle

Answer 2

我重构了您的代码。您的按钮几乎是重复的代码。尝试创建一个基类并追加不同的类，或者在这种情况下添加child选择器。

我认为我不喜欢jQuery。所以我用香草javascript重写了它。

Array.from(document.getElementsByClassName('deurbody__knop')).map(knop => {
	console.log(localStorage.getItem(knop.id));
	if (localStorage.getItem(knop.id) == 'true') knop.style.backgroundColor = 'grey';
    
	knop.addEventListener('click', () => {
  	if (knop.style.backgroundColor == 'grey'){
    	knop.removeAttribute('style');
      localStorage.setItem(knop.id, false);
    }
    else {
    	knop.style.backgroundColor = 'grey';
      localStorage.setItem(knop.id, true);
    }
  });
});

.deurbody {
    display: flex;
    flex-direction: column;
    max-width: 15em;
}

.deurbody__knop {
  padding: 1em;
  display: block;
  margin: 0.1em;
  text-align: center;
  cursor: pointer;
  color: #fff;
}

.deurbody__knop:nth-child(odd) {
  background-color: #ff5552;
}

.deurbody__knop:nth-child(even) {
  background-color: #E64C49;
}

.deurbody__knop:last-child {
  background-color: #272727;
  color: #E64C49;
}

<div class="deurbody">
  <div class="deurbody__knop" id="deurbody__knop-5">5</div>
  <div class="deurbody__knop" id="deurbody__knop-4">4</div>
  <div class="deurbody__knop" id="deurbody__knop-3">3</div>
  <div class="deurbody__knop" id="deurbody__knop-2">2</div>
  <div class="deurbody__knop" id="deurbody__knop-1">1</div>
</div>

如何在localStorage中切换并记住div

2 个答案: