querySelectorAll()を使うのが早いかと思います。
document.querySelectorAll('[id*=select]').forEach(e => e.className = '');
この方法であればbutton要素の数を増減しても書き換え不要です。
Like!
javascriptのfor文 classNameを操作する際に連番の異なるidを回したい
解決したいこと
classList.addをしていく前に、classNameを一旦すべてクリアしたいです。
下記の通り実装しようとしたのですがうまくいきません。
どのように結合したらよいでしょうか？
該当するソースコード
<ul>
<li>
<button id="select-01" class="">
アラカルト
</button>
</li>
<li>
<button id="select-02" class="">
サンドイッチ
</button>
</li>
<li>
<button id="select-03" class="">
テイクアウト
</button>
</li>
<li>
<button id="select-04" class="">
オードブル
</button>
</li>
</ul>
//select-menu
let select01 = document.getElementById("select-01");
let select02 = document.getElementById("select-02");
let select03 = document.getElementById("select-03");
let select04 = document.getElementById("select-04");
$('#select-01').click(function () {
for (let i = 1; i < 5; i++) {
`select0${i}.className='';`
}
// select01.className='';
// select02.className='';
// select03.className='';
// select04.className='';
select01.classList.add("selected")
select02.classList.add("no-selected")
select03.classList.add("no-selected")
select04.classList.add("no-selected")
});
自分で試したこと
select01.className='';
これを×4つ（コメントアウト部分）で実行して、想定通りの挙動はしてくれましたが、
これをfor文で回したいと考えています。
ボタン01クリック⇒他の３つは背景色を変更
ボタン02クリック⇒他の３つは背景色を変更
というようにどれか一つだけ背景色（クラスselectedがついている）ありの状態にしたいと思っています。
宜しくお願いします。
0
5Answer
2
for文ではないですが、class属性を初期化できれば良いのだと思ったので、
例えばArrayを使う方法です。
const select01 = document.getElementById("select-01");
const select02 = document.getElementById("select-02");
const select03 = document.getElementById("select-03");
const select04 = document.getElementById("select-04");
const list = new Array();
list.push(select01);
list.push(select02);
list.push(select03);
list.push(select04);
list.forEach(function(item){
item.className = '';
});
あくまでfor文を使って解決したいのならば、このような方法はいかがでしょうか。
for (let i = 1; i < 5; i++) {
document.getElementById(`select-0${i}`).className='';
}
Like!
Comments
@Haru57636433
Questionerなるほど、Arrayを使うやり方もあるのですね！
for文の方がコードは短く済みそうなので、今回はfor文の方を使わせて頂こうと思います！
ありがとうございました！！
vuejsとかreactみたいなバインディング機能のあるフレームワークを使うのもありですね。すごいスッキリしますよ。
Like!
This answer has been deleted for violation of our Terms of Service.
やりたいことは、ボタンをクリックした際、クリックしたボタンにはselected、それ以外のボタンにはno-selectedのクラス名を付けたいということでしょうか。
だとしたら、それぞれのボタンにidを振ったりということはとくに行わなくても可能です。
const menu = document.querySelector('ul');
const menuButtons = menu.querySelectorAll('button');
const noSelected = () => menuButtons.forEach(el => el.className = 'no-selected');
noSelected();
menu.addEventListener('click', ev => {
noSelected();
if(ev.target.tagName !== 'BUTTON') return;
ev.target.className = 'selected';
});
Like!