Question

用户可以从下拉列表中选择主题，并且所选主题将存储在本地存储中。虽然它可以在localstorage中保存下拉值，但它没有调用样式表。请帮忙，谢谢！

请原谅Frankenstein类型的代码。 JS对我很陌生，我是一名贸易设计师。

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>
</head>
<body>

<select id="mySelect" class="test">
    <option value="style1.css">Option A</option>
    <option value="style2.css">Option B</option>
    <option value="style3.css">Option C</option>
</select>


<!--local storage-->
<script>
 $('.test').change(function() {
    localStorage.setItem(this.id, this.value);
}).val(function() {
    return localStorage.getItem(this.id)
});
</script>
<!--dropdown css-->

 <script>
        function setStyleSource (linkID, sourceLoc) {
      var theLink = document.getElementById(linkID);
      theLink.href = sourceLoc;
      console.log(theLink.href);
    }

    document.getElementById("mySelect").addEventListener("change", function(){
        var selected = this.options[this.selectedIndex].value;
        setStyleSource ("s1", selected)
    });
    </script>


</body>
</html>

1.改变css的下拉工作。 2.localstorage为选定的选项工作。但是存储的所选选项实际上并没有显示自己的css表（它显示的是默认的css）。

Answer 1

使用val()更改下拉列表值不会触发change事件，您必须在设置值后手动触发它：

$('.test').val(localStorage.getItem(this.id)).trigger('change'); // OR .change()

在触发之前为change 添加事件监听器：

function setStyleSource(linkID, sourceLoc) { var theLink = document.getElementById(linkID); theLink.href = sourceLoc; console.log(theLink.href); } document.getElementById("mySelect").addEventListener("change", function() { var selected = this.options[this.selectedIndex].value; setStyleSource("s1", selected) }); $('.test').change(function() { localStorage.setItem(this.id, this.value); }).val(function() { return localStorage.getItem(this.id) }).trigger('change');

使用本地存储下拉CSS

1 个答案: