如何使用下拉菜单更改和保存正文颜色答案

【问题标题】：How to change and save color of body using dropdown menu如何使用下拉菜单更改和保存正文颜色
【发布时间】：2017-11-23 21:38:10
【问题描述】：

我正在尝试使用下拉菜单中提供的选项更改正文颜色并保存这些更改，以便当用户刷新页面时，背景颜色将等于他们设置的颜色。但是，我在根据下拉菜单选项更改背景颜色时遇到问题。

HTML

<button class="btn-secondmenu">Button</button>

<select name="colors" id="colors">
    <option value="red">Red</option>
    <option value="green" selected="selected">Green</option>
    <option value="yellow">Yellow</option>
    <option value="black">Black</option>
</select>

$(function(){
    var select = document.getElementById("colors");

    select.onchange = function(){
        var selectedColor = select.options[select.selectedIndex].value;
        alert(selectedString);
    }

    if (localStorage.getItem('background') !== null) {
        getColour = localStorage.background;
        $('.bdy').css('background', getColour);
    } else {
        getColour = 'green';
    }

    $('.btn-secondmenu').click(function(){
        if(getColour == 'blue'){
            localStorage.removeItem('background');
            $('.bdy').css('background', 'red');
            localStorage.setItem('background', 'red');
        } else {
            getColour = 'blue';
            localStorage.removeItem('background');
            $('.bdy').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
});

任何建议将不胜感激，谢谢！

【问题讨论】：

有一个名为getColour 的变量很奇怪。这通常应该保留给 getter 函数，然后返回一个值。

标签： javascript jquery html css local-storage

【解决方案1】：

您在这里过于复杂了，您可以在下拉列表的 onchange 事件中实现这一点，方法是使用 $(this).val() 获取颜色。

$('select[name="colors"]').change(function() {
  $('.bdy').css('background', $(this).val());
  localStorage.setItem('background', $(this).val());
});

注意：

没有必要从localStorage中删除项目然后重置它，只使用.setItem()它会覆盖项目的值，如果你检查Storage.setItem() MDN Reference你可以看到：

Storage 接口的setItem() 方法，当传递一个键名和值时，将添加该键到存储中，或更新该键的值，如果它已经存在了。

演示：

$('select[name="colors"]').change(function() {
  $('.bdy').css('background', $(this).val());
  //localStorage.setItem('background', $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bdy">
  <select name="colors" id="colors">
                <option value="red">Red</option>
                <option value="green" selected="selected">Green</option>
                <option value="yellow">Yellow</option>
                <option value="black">Black</option>
  </select>
</div>

【讨论】：

由于某种原因，您的代码无法在 JSFiddle 或我的网站上运行。虽然它看起来是一个很好的解决方案，而且它可能是唯一真正节省颜色变化的解决方案。
@SterlingKing 你能提供一个演示/小提琴的链接吗？
好的，现在颜色更改工作了，但是当我刷新时它不会保存颜色。也许是因为代码托管在小提琴而不是我自己的网络主机上？ jsfiddle.net/zwmy23qc/1

【解决方案2】：

这里是简单易懂且完整的工作解决方案：

你的 HTML 有一些更好的命名：

    <button id="changeColorButton" class="btn-secondmenu">Button</button>


    <select name="colors" id="changeColorSelect">
            <option value="red">Red</option>
            <option value="green" selected="selected">Green</option>
            <option value="yellow">Yellow</option>
            <option value="black">Black</option>
    </select>

而jQ可以这么短：

$('#changeColorButton').click(function() {
    var color = $('#changeColorSelect').val();
    $('body').css("background-color",color);
})

你可以在这里看到它的实际效果：（我可以做一个单行但更难阅读）。

working JSFiddle demo

【讨论】：

【解决方案3】：

你应该使用

$('.bdy').css('background-color', getColour);

如果那是body 标签，那么最好使用：

$('body').css('background-color', getColour);

【讨论】：