4

私は次のHTMLを持っています:

<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button>
<button name="black" onclick="setThemeColor(this.name)">Black</button>

そしてこのスクリプト：

if (localStorage.buttonColor) {
   var themeButtons = document.querySelectorAll(".theme");
   for (var button in themeButtons) {
      themeButtons[buttons].removeAttribute("disabled");
   }
   // I need here to disable the button with the name that matches localstorage name
}

すべてのボタンから無効を削除する方法は既に用意されています。しかし、jQueryを使用せずにlocalStorage.buttonColorと同じ名前のボタンを無効にするにはどうすればよいですか?

また、これをすべてfor (var button in themeButtons)ループで実行できますか? それができれば、もっときれいな解決策になるかもしれません。

4

1 に答える 1

7

ボタンが 1 つしかない場合:

document.querySelector('button[name="' + localStorage.buttonColor + '"]').disabled = true;

または：

var el = document.getElementsByName(localStorage.buttonColor);
if (el) {
    el[0].disabled = true;
}

複数の要素がある場合:

var all = document.querySelectorAll('button[name="' + localStorage.buttonColor + '"]');
for (var i = 0, len = all.length; i<len; i++){
    all[i].disabled = true;
}

複数のボタンがあり、名前を共有しないものを有効にする必要がある場合localStorage.buttonColor:

var buttons = document.getElementsByTagName('button'),
    buttonsQSA = document.querySelectorAll('button');

// iterate over whichever collection you prefer to use
for (var i = 0, len = buttonsQSA.length; i<len; i++){
    buttonsQSA[i].disabled = buttonsQSA[i].name == localStorage.buttonColor;
}
于 2013-10-11T10:25:23.490 に答える