2017-12-09 8 views
0

ユーザーはドロップダウンからテーマを選択し、選択したテーマはローカルストレージに保存されます。 localstorageのドロップダウン値を保存することはできますが、スタイルシートを呼び出すことはありません。助けてください、ありがとう!ローカルストレージを使用したドロップダウンCSS

フランデンシュタインのコードタイプを赦免します。 JSは私にとって外国人です。私はデザイナーです。 CSSの作品を変更する

<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.ドロップダウン。 2.選択したオプションのローカルストレージ。 保存されている選択されたオプションは実際には独自のCSSシートを表示しません(代わりにデフォルトのCSSを表示しています)。 val() doesntのトリガーchangeイベントでdropdownvalueを変更

+0

console.logには何が表示されますか? – dgrogan

+0

スタイルシートを変更している唯一のものは、リンクを変更するドロップダウンからの選択です(ページを更新する必要があるかもしれません)。私は間違っているかもしれませんが、ストレージの呼び出しは何もしていないように見えます。 – wazz

+0

@dgrogan空白を表示しています – BenC

答えて

0

、あなたがやって値を設定した後、それを手動でトリガする必要があります。

$('.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'); 
+0

提案していただきありがとうございます。あなたの意見を追加しましたが、うまくいかないようです。しかし、正しく追加したかどうかはわかりません。[リンク](http://imaginaryzebra.com/feature%20test/css_dropdown%2Blocalstorage.html) 最終的には、それぞれのCSSを表示したいページを更新した後現在、ページを更新した後に選択されたドロップダウンオプションが表示されますが、それぞれのCSSを使用していません – BenC

関連する問題