jQuery 2つのボタンのCSSを切り替える

###前提・実現したいこと
jQueryを使用し、2つのボタンのCSSを切り替えたいと思っています。
現在のソースコードでは2つともONの状態にできるようになってしまい、if文の書き方がわからなくなってしまっています。

###該当のソースコード

HTML
1
2<input id="test" type="button" class="btn_active btn" value="test" style="width: 100px;margin-left: 10px;" >テスト</input>
3<input id="test" type="button" class="btn_active btn" value="test" style="width: 100px;margin-left: 10px;">テスト2</input>

CSS
1.btn_active {
2    color: #fff;
3    border: 1px solid #ff5151;
4    background: #ff5151;
5}
6
7.btn{
8    color: #333;
9    border: 1px solid #c2c2c2;
10    background: linear-gradient(#f5f5f5, #f1f1f1);
11    font-weight: bold;
12}

js
1$('#test').on('click',function(){
2          $(this).toggleClass('btn_active');
3          var flg = $(this).hasClass('btn_active');
4          //ここからif文で片方がactiveになっている場合はbtn_activeクラスを外すという処理が必要(?)
5      });
6
7  })();
8

CSSはもともとあるのを利用するので、取り出し方に問題があるかもしれません。

jQueryやjsはあまり触ったことがなく、初心者となります。
不足部分もあるかと思いますが、宜しくお願い致します。

行動規範の内容に同意します

回答2件

こんにちは。

ご質問の冒頭に、

現在のソースコードでは2つともONの状態にできるようになってしまい、

とあったので、「２つのボタンが同時にON(active)になってはいけない」というのを
実現されたいのかなと思いまして、以下のようなものを作りました。

https://jsfiddle.net/jun68ykt/beqxeLsp/2/

上記は以下のように動作します。

active だと背景色が #333（濃い灰色）になります。
初期状態では、id="test" のほうが active
active ではないボタンをクリックすると、それがactiveになり、他方は active でなくなる。
active であるボタンをクリックしても変化しない。

参考になれば幸いです。

投稿2018/01/04 08:45

jun68ykt

総合スコア9058

yuuuui

2018/01/04 09:13

わざわざ作成してくださり、ありがとうございます。わかりやすく、こちらも私が行いたい内容でした。ベストアンサーはすでに選んでしまい申し訳ございません。参考にさせていただきます。

行動規範の内容に同意します

ベストアンサー

class は一つの要素に複数設定することができます。

html
1<input type="button" class="btn active" value="ボタン" />

これを利用すれば、例示したコードのように簡潔に書くことができます。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.btn {
8				border: 1px solid #999999;
9				border-radius: 4px;
10				line-height: 32px;
11				background-color: #EEEEEE;
12			}
13			.btn.active {
14				border: 1px solid #9999ff;
15				background-color: #3366ff;
16				color:#eeeeee;
17			}
18		</style>
19	</head>
20	<body>
21		<div>
22			<input type="button" class="btn" value="ボタン" />
23			<input type="button" class="btn" value="ボタン" />
24			<input type="button" class="btn" value="ボタン" />
25		</div>
26		<div id="response">
27
28		</div>
29		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
30		<script type="text/javascript">
31			$(function () {
32				$('.btn').on('click', function () {
33					$(this).toggleClass('active');
34				});
35			});
36		</script>
37	</body>
38</html>