###前提・実現したいこと
タブ1に3つ、タブ2に3つの疑似ラジオボタンを設置しています。
jqueryで1つずつ値を取ろうとしているのですが、どうにも上手くいきません。
radio1にチェックがあれば、タブ1のliをクリックしたら<input type="text" data-main="radio1">に表示。radio2にチェックがあれば、タブ1のliをクリックしたら<input type="text" data-main="radio2">に表示。
ここまでは問題なく動作しているのですが、タブ1のラジオボタンをradio2にチェックしたまま、タブ2に切り替えた時に、タブ2のラジオボタンのradio1にチェックがついていても、liをクリックしたら<input type="text" data-main="radio1">に表示されず、<input type="text" data-main="radio2">に表示されてしまいます。
もう一度、タブ2でチェックのついているradio1をクリックすれば<input type="text" data-main="radio1">に表示されるのですが、切り替えた直後のチェックの値が取れていないようです。
タブ1についてもページ表示直後はradio1にチェックがあっても値がとれませんでしたが、なんとか.triggerHandler('click');で取得する事ができました。タブ切り替え直後もtriggerでとれるのか?とやってみましたが、eq(0)などを使ってもうまい具合に動作しませんでした。
タブを切り替えた直後の値の取り方をわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。
###該当のソースコード
--こちらはタブ1のラジオボタン部分のjqueryです。タブ2もほぼ同じです。
val()の中は省略しています。$hogehogeにはvarでli部分、$hogeにはinputを入れています。
var $hoge = $("input[data-main='radio1']"); var $hoge2 = $("input[data-main='radio2']"); var $hoge3 = $("input[data-main='radio3']"); var radiocheck = ""; $(".radio").on("click", function(e) { radiocheck = $(this).data("b"); }).triggerHandler('click'); $hogehoge.on("click", function(e) { if(radiocheck == "radio1"){ $hoge.val(); } else if(radiocheck == "radio2") { $hoge2.val(); } else if(radiocheck == "radio3") { $hoge3.val(); } }); --タブセット <div class="tabs"> <button type="button" class="tab active" data-a="tab1">tab1</button> <button type="button" class="tab" data-a="tab2">tab2</button> </div> --タブ1 <div class="tab1_radio checked"> <span class="radio checked" data-b="radio1">radio1</span> <span class="radio" data-b="radio2">radio2</span> <span class="radio" data-b="radio3">radio3</span> </div> <ul> <li>テスト</li> <li>テスト2</li> </ul> --タブ2 <div class="tab2_radio"> <span class="radio checked" data-b="radio1">radio1</span> <span class="radio" data-b="radio2">radio2</span> <span class="radio" data-b="radio3">radio3</span> </div> <ul> <li>テスト3</li> <li>テスト4</li> </ul> ---表示箇所 <input type="text" data-main="radio1"> <input type="text" data-main="radio2"> <input type="text" data-main="radio3">
回答1件
あなたの回答
tips
プレビュー