前提・実現したいこと
タブ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">-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
radiocheck の書き換え部分が問題だと思うのですが、全体のコードがわからないため、すみませんがそこについては指摘できません。
私ならたぶん、変数に状態を入れて書き換えるより、.active を頼りに状態を把握し、現在のタブ選択状況を更新するように書きます。
動くサンプル：https://jsfiddle.net/b72a3378/2/
$( '.tabbutton' ).on( 'click', function() {
var $_ = $( this ), target = $_.data( 'a' ), $t;
// ボタンのラジオ処理
$( '.tabbutton' ).removeClass( 'active' );
$_.addClass( 'active' );
// タブのラジオ処理
$t = $( '.tab' ).removeClass( 'active' ).filter( '#' + target ).addClass( 'active' );
// 値の代入
$( '#tab' ).val( target );
$( '#radio' ).val( $t.find( '.active' ).data( 'b' ) );
} );
$( '.radio' ).on( 'click', function() {
var $_ = $( this ), $parent = $_.parent(), $mytab = $_.parents( '.tab' );
// タブラジオのラジオ処理
$parent.find( '.radio' ).removeClass( 'active' );
$_.addClass( 'active' );
// タブがアクティブな場合のみ処理
if ( $mytab.hasClass( 'active' ) ) {
// 値の代入
$( '#radio' ).val( $_.data( 'b' ) );
}
} );
// 初期値を入れる
$( '#tab' ).val( $( '.tab.active' ).attr( 'id' ) );
$( '#radio' ).val( $( '.tab.active .active' ).data( 'b' ) );<div class="tabset">
<div class="tabs">
<button type="button" class="tabbutton active" data-a="tab1">tab1</button>
<button type="button" class="tabbutton" data-a="tab2">tab2</button>
</div>
<div id="tab1" class="tab active">
<div class="tab_radio">
<span class="radio active" 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>
</div>
<div id="tab2" class="tab">
<div class="tab_radio">
<span class="radio active" 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>
</div>
</div>
<input type="text" id="tab">
<input type="text" id="radio">投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.47%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/05/21 13:59
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344
2016/05/21 14:26
radiocheck と $hoge を指定している箇所がありませんが、そこも追記願えませんか？
nyamo
2016/05/21 18:28
radiocheck と $hogeの変数を追加いたしました。
kei344
2016/05/21 18:32
何度もすいませんが、「input[data-target='title']」にあたるものが書かれていません。「<input type="text" data-main="radio1">」のことでしょうか？
nyamo
2016/05/21 18:36
はい。修正して記載しました。
kei344
2016/05/21 18:44 編集
buttonのコード部分の問題だと思うのですが、そこを記述されていませんね。