javascript - 如何使用下拉菜单更改和保存主体颜色

Question

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

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>

JS

$(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');
        }
    });
});

如有任何建议，我们将不胜感激，谢谢!

Answer 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，它将覆盖元素的值你可以看到:

The setItem() method of the Storage interface, when passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

演示:

$('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>