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，您可以看到：

存储界面的setItem()方法，当传递密钥名称和值时，会将该密钥添加到存储，或更新该密钥＆＃ 39; s值，如果它已经存在。

<强>演示：

＆＃13;
＆＃13;
$('select[name="colors"]').change(function() { $('.bdy').css('background', $(this).val()); //localStorage.setItem('background', $(this).val()); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你应该使用

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

如果是body代码，那么最好使用：

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

Answer 3

这是一个简单易懂，完整的解决方案：

您的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 个答案: