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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3249閲覧

ボタンの切り替えでスマートなアルゴリズムはありませんか?

Gazelle

総合スコア136

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/10/28 13:25

次のような場合にスマートにプログラムを書く方法はありませんか?

次のようにHTMLとCSSがあった場合、

html

1<button id="btnA class="active"">ボタンA</button> 2<button id="btnB">ボタンB</button> 3 4<div id="btnA_display">ボタンAで表示できるもの要素</div> 5<div id="btnB_display class="display_hidden"">ボタンAで表示できるもの要素</div>

css

1.active { 2 background-color: red; 3} 4.display_hidden { 5 display: hidden; 6}

javascript(jQuery)を次のように書くのは冗長だと思うのです。

javascript

1$("#btnA").on('click', function() { 2 $(this).removeClass("active"); 3 $("#btnB").addClass("active"); 4 $("#btnA_display").removeClass("display_hidden"); 5 $("#btnB_display").addClass("display_hidden"); 6}); 7 8$("#btnB").on('click', function() { 9 $(this).removeClass("active"); 10 $("#btnA").addClass("active"); 11 $("#btnA_display").addClass("display_hidden"); 12 $("#btnB_display").removeClass("display_hidden"); 13});

この時のJavascriptの処理をもう少しスマートに書きたいのですが、良い手法はありませんでしょうか?
HTMLとCSSから改善していただいても構いません。

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

イベントバブリングと event オブジェクトを活用すると良いと思います。

HTML

1<style> 2[aria-hidden=true] { 3 display: none; 4} 5</style> 6<script src="../lib/other-work-lib/jquery-2.1.4.js"></script> 7</head> 8<body> 9<p id="sample"> 10 <button id="btn-a" class="active">ボタンA</button> 11 <button id="btn-b">ボタンB</button> 12</p> 13 14<div id="content-a" class="contents" aria-hidden="false">content a</div> 15<div id="content-b" class="contents" aria-hidden="true">content b</div> 16 17<script> 18'use strict'; 19jQuery('#sample').on('click', function (event) { 20 var button = event.target, 21 jButton = jQuery(button); 22 23 if (!jButton.hasClass('active')) { 24 jQuery('button.active', event.currentTarget).removeClass('active'); 25 jButton.addClass('active'); 26 jQuery('.contents[aria-hidden=false]').attr('aria-hidden', 'true'); 27 jQuery('#content-' + button.id.slice(4)).attr('aria-hidden', 'false'); 28 } 29}); 30</script>

投稿2015/10/28 13:52

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問