Go to Qiita Advent Calendar 2024 Top
LoginSignup
Haru57636433
@Haru57636433 (haru .)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

javascriptのfor文　classNameを操作する際に連番の異なるidを回したい

Q&A

HTMLCSSJavaScript

解決したいこと

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

nw3349
@nw3349

querySelectorAll()を使うのが早いかと思います。

document.querySelectorAll('[id*=select]').forEach(e => e.className = '');

この方法であればbutton要素の数を増減しても書き換え不要です。

2Like
blue32a
@blue32a

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='';
}
1Like

Comments

  1. @Haru57636433

    Questioner

    なるほど、Arrayを使うやり方もあるのですね！
    for文の方がコードは短く済みそうなので、今回はfor文の方を使わせて頂こうと思います！
    ありがとうございました！！
miyamotok0105
@miyamotok0105

vuejsとかreactみたいなバインディング機能のあるフレームワークを使うのもありですね。すごいスッキリしますよ。

0Like

This answer has been deleted for violation of our Terms of Service.

hnkt
@hnkt

やりたいことは、ボタンをクリックした際、クリックしたボタンには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';
});
0Like

Your answer might help someone💌

LoginSign Up