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

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

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

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

Q&A

解決済

1回答

973閲覧

Jquery class='active' のインデックスを切り替えたタイミング以外で知る方法

yamada

総合スコア8

jQuery

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

0グッド

0クリップ

投稿2020/12/19 04:48

編集2020/12/19 10:17

html

1<head> 2 <meta charset="utf-8"> 3<title> 4</title> 5 <!-- jQuery 3 --> 6 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 7</head> 8<boby> 9<div class="tab_wrap"> 10 <input id="tab1" type="radio" name="tab_btn"> 11 <input id="tab2" type="radio" name="tab_btn" checked> 12 <input id="tab3" type="radio" name="tab_btn"> 13 14 <div class="tab_area"> 15 <label class="tab_label" for="tab1">tab1</label> 16 <label class="tab_label active" for="tab2">tab2</label> 17 <label class="tab_label" for="tab3">tab3</label> 18 </div> 19 <div class="panel_area"> 20 <div id="panel1" class="tab_panel"> 21 <p><a href="/admin/proposal/show/1">panel1</a></p> 22 </div> 23 <div id="panel2" class="tab_panel active"> 24 <p><a href="/admin/proposal/show/1">panel2</a></p> 25 </div> 26 <div id="panel3" class="tab_panel"> 27 <p><a href="/admin/proposal/show/1">panel3</a></p> 28 </div> 29 </div> 30</div> 31<div> 32<input type="checkbox" name="check" value="prop" id="prop">prop</p> 33</div> 34<script> 35$(".tab_label").on("click",function(){ 36 var $th = $(this).index(); 37 38 console.log("th" + $th); 39 $(".tab_label").removeClass("active"); 40 $(".tab_panel").removeClass("active"); 41 $(this).addClass("active"); 42 $(".tab_panel").eq($th).addClass("active"); 43}); 44</script> 45<script> 46$(function() { 47 48 // チェックボックスをチェックしたら発動 49 $('input[name="check"]').change(function() { 50 var prop = $('#prop').prop('checked'); 51 if (prop) { 52 var $th = $(".tab_label").index(); 53 $(".tab_panel").each(function(i, o){ 54 55 //取り出せない 56 var className = $(".tab_panel").attr("class"); 57 var class_Array = className.split(" "); 58 alert("class_Array[0]" + class_Array[0]); 59 alert("class_Array[1]" + class_Array[1]); 60 }); 61 } 62 63 }); 64}); 65</script> 66</body> 67</html>

この場合、

$(".tab_label").on("click",function(){
のタイミングでは、
tab_panel class='tab_panel active'のindexを知ることは出来ますが、

例えば、チェックボックスのチェックタイミングなど
の場合、tab_panel class='tab_panel active'のindex は、どうしたら取得できるのでしょうか?

よろしくお願いします。

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

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

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

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

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

yamada

2020/12/19 05:48

ご連絡ありがとうございます。 マークダウンの編集に修正しました。
guest

回答1

0

自己解決

html

1 var className = $(".tab_panel").attr("class"); -> × 2 var className = $(this).attr("class"); -> 〇 3 4

投稿2020/12/20 04:10

yamada

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問