jquery - 如何切换并记住 localStorage 中的 div

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 的切换属性，但似乎不起作用。

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");
});

取决于你没有设置特殊颜色时是否要拥有本地存储 key 。

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