質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

Javascriptのonclickでクリックしたボタンだけ選択状態(背景色付)、他は背景色を消したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 397

oyatsu8

score 86

下記のようなhtmlに、テスト01、テスト02、テスト03の3つのボタンを作りました。
そこで、

  • テスト01をクリックすると、テスト01以外のボタンの背景は色無、
  • テスト02をクリックすると、テスト02以外のボタンの背景は色無、
  • テスト03をクリックすると、テスト03以外のボタンの背景は色無、、
  • どれか1つは必ず洗濯状態、
  • 初期状態はテスト01
  • 現在は3つでテストしているが、実際には100個くらいのボタンを作成したい
    としたいのですが、うまく出来ずにおります(今はベタがきでtoggleをつけていますが、、頭が働かないので、明日再度考えようと思っています)。
    アドバイスを頂けたら助かります。

index.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8"/>
<style type="text/css">
<!--
ul#sw_st{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  border: solid 1px #800;
  text-align: left;
  padding: 0px;
  margin: 0px;
  font-size: 1em;
  text-align: center;
  line-height: 0.8;
}

ul#sw_st>li{
  border: solid 1px #999;
  list-style: none;
  box-sizing: border-box;
  padding: 5px 10px;
  width:100%;
}

.mizu{
    background: #9FF;
}
//-->
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>選択テスト</title>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>

  <ul id="sw_st">
    <li id="sw01">
      テスト01
    </li>
    <li id="sw02">
      テスト02
    </li>
    <li id="sw03">
      テスト03
    </li>
  </ul>


<script type="text/javascript">
var swKeep = 0;
  document.getElementById("sw01").onclick = function() {
    this.classList.toggle('mizu');
    swKeep = 1;

    /* if ( this.classList.contains('mizu') ) {


    } else {
        console.log("01!消す");

    } */
  };

  document.getElementById("sw02").onclick = function() {
    this.classList.toggle('mizu');
    if ( this.classList.contains('mizu') ) {
        a.insertAdjacentHTML( 'afterend', 'true!' );
    } else {
        a.insertAdjacentHTML( 'afterend', 'false!' );
    }
  };

  document.getElementById("sw03").onclick = function() {
    this.classList.toggle('mizu');
    if ( this.classList.contains('mizu') ) {
        a.insertAdjacentHTML( 'afterend', 'true!' );
    } else {
        a.insertAdjacentHTML( 'afterend', 'false!' );
    }
  };
</script>


</body>
</html>

追記:
回答で書いてくださったjsを入れるだけでちゃんと動きました。
ありがとうございます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

const $li = document.querySelectorAll( '#sw>li' );
document.querySelector( '#sw' ).onclick = e => {
  if ( e.target === e.currentTarget ) return;
  let item = e.target.closest( 'li' );
  $li.forEach( n => n.classList[ item === n ? 'add' : 'remove' ]( 'mizu' ) );
}; // 編集前のコードがli要素の中にあるHTML要素に対応できていなかったのを修正

動くサンプル:https://jsfiddle.net/2n8Lw4eu/2/


【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【Element.closest() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/closest

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/25 10:45

    ありがとうございます!今から理解してみようと思います。

    キャンセル

  • 2018/11/25 12:30

    理解できました!知らないメソッドや=>などもほとんど使ったことがなかったため、勉強になりました。大変ありがとうございます。ただ、こういったjsの膨大なメソッドの中からやりたいことにあったものをどうやって見つけるのか(すべて学習が必要なのか)を考えました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る