Question

我想制作一个下拉菜单，其中有三个选项可以更改nav的颜色并将其保存在本地存储中，当您更新页面时，您选择的颜色仍然存在。

我想在Javascript中执行此操作，而不是使用jQuery的任何帮助。

这是我的HTML：

<nav id="box">
   <select>
      <option value="grey" id="grey">Grey</option>
      <option value="black" id="black">Black</option>
      <option value="green" id="green">Green</option>
   </select>
</nav>

这是我的CSS：

#box {
    height:50px;
    padding: 5px;
    margin:0 auto;
    font-size:25px;
    text-align: center; 
}
.grey {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #FFF;
}
.black {
    background-color: rgba(0, 0, 0, 0.9);
    color: #FFF;
}
.green {
    background-color: rgba(33.3, 46.7, 7.8);
    border-color: #000;
}

这是我的JS：

function setUp() {
   document.getElementById("grey").onclick = setSuccessStyle;
   document.getElementById("black").onclick = setErrorStyle;
   document.getElementById("green").onclick = setInfoStyle;
}

function setSuccessStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "grey";   
}

function setErrorStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "black";
}

function setInfoStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "green";
}

我知道我不应该将其作为＆＃34;动作＆＃34;但我不知道如何解决这个问题。

Answer 1

您的代码中存在几个问题。

基本上，您需要使用onchange上的select，而click上的option使用localStorage。

用户选择颜色后，将其存储在localStorage中。页面加载时，您可以从function setUp(sel) { var messageBox = document.getElementById("box"); messageBox.className = sel.value; localStorage.setItem('color', sel.value); } var selectElm = document.querySelector('select'); selectElm.value = localStorage.getItem('color') || selectElm.querySelector('option').getAttribute('value'); selectElm.onchange();读取它并使用它设置类值。

由于安全原因，此代码段不起作用，因此您可以在此bin

中查看结果

＆＃13;

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(0, 72, 3, 0.47);
  border-color: #000;
}

＆＃13;

<nav id="box">
  <select onchange="setUp(this)">
    <option value="grey">Grey</option>
    <option value="black">Black</option>
    <option value="green">Green</option>
  </select>
</nav>

＆＃13;

let jsonData = NSData(contentsOfURL: url!)
let readableJSON = JSON(data: jsonData!, options: NSJSONReadingOptions.MutableContainers, error: nil)
let object = try! NSJSONSerialization.JSONObjectWithData(jsonData!, options: NSJSONReadingOptions.AllowFragments) as! Dictionary<String, AnyObject>
let json = JSON(object)

for (_,object):(String, JSON) in readableJSON { 
    let commonName = json["toLocationDisambiguation"]["disambiguationOptions"][0]["place"]["commonNam‌e"].stringValue 
    commonNameArray.append(commonName)
}

＆＃13;

Answer 2

＆＃13;

function setUp() {
  document.getElementById("select").addEventListener("change", onChangeSelect);
}

function onChangeSelect() {
  var value = document.getElementById("select").value;
  console.log(value);
  switch (value) {
    case "grey":
      setSuccessStyle();
      break;
    case "black":
      setErrorStyle();
      break;
    case "green":
      setInfoStyle();
      break;
  }
}

function setSuccessStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "grey"; 
}

function setErrorStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "black";
}

function setInfoStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "green";
}

setUp();

＆＃13;

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(33.3, 46.7, 7.8);
  border-color: #000;
}

＆＃13;

<nav id="box">
  <select id="select">
    <option value="grey" id="grey">Grey</option>
    <option value="black" id="black">Black</option>
    <option value="green" id="green">Green</option>
  </select>
</nav>

＆＃13;

Answer 3

这是一个使用HTML和CSS的答案。只需用此替换你的setUp函数，并确保在页面加载时调用setUp。

function setUp() {
    var box = document.getElementById("box").getElementsByTagName('select')[0];
    box.onchange = function(){
            switch(this.value){
                case 'grey':
                    setSuccessStyle();
                    break;
                case 'black':
                    setErrorStyle();
                    break;
                case 'green':
                default:
                    setInfoStyle();
                    break;
            }
            //localStorage part
            localStorage.setItem("box",this.value);     //'box' can be any string key you want
        };
    //load the old value from localStorage
    var selection = localStorage.getItem("box");
    if(selection !== null){
        var items = box.getElementsByTagName("option");
        for(var i=0; i<items.length; i++){
            if(items[i].value == selection){
                box.selectedIndex = i;
                break;
            }
        }
    }
}

Localstorage选择Javascript - 保存样式CSS

3 个答案: