Q&A
「#a1」のボタンを押してから「.enter」を押すのでしょうか。その場合「#b1」「#a1」を押されている場合はどのような挙動になるのでしょうか。
###前提・実現したいこと・発生している問題
はじめまして。javascript初心者です。自分なりに調べてみたのですが解決しないので質問させてください。
javascriptで、ページ内のボタン二つに対し、一つのアラートを表示したいと思っております。
a群のボタン
id=a1 id=a2
b群のボタン
id=b1 id=b2
がある時、a群とb群からひとつずつ選んで、アラートがその結果で変わるようにしたいです。
例えば「#a1」と「#b1」を押してからエンターをクリックした時に「これはa1とb1です」、「#a1」と「#b2」を押してからエンターをクリックした時に「これはa1とb2です」、「#a2」と「#b1」を押してからエンターをクリックした時に「これはa2とb1です」…のようにしたいと思っております。
ボタンを1つしか押さない場合は「.enter」を押しても何もアラートが出ないようにしたいです。
また、該当部分のjavascriptは省略しておりますが、各ボタンをクリックすると色が変わるようにしております。
###該当のソースコード
jabascript
1<script> 2$(function(){ 3$(".enter").click(function(){ 4if($('#a1' && '#b2')){ 5alert('これはa1とb2です'); 6} 7}); 8}); 9</script>
html
1<div id="content"> 2 <form> 3 <div class="agun"> 4 <p> 5 <input type="button" id="a1" /> 6 <input type="button" id="a2" /> 7 </p> 8 </div> 9 <div class="bgun"> 10 <p> 11 <input type="button" id="b1" /> 12 <input type="button" id="b2" /> 13 </p> 14 </div> 15 <div> 16 <p> 17 <input type="button" value="入力" class="enter" /> 18 <input type="reset" /> 19 </p> 20 </div> 21 </form> 22</div>
###試したこと
javascriptの
if(&('#a1' && '#b2'))
の部分を、
if(&('#a1#b2'))
if(&('#a1 , #b2'))
などにしてみたのですが解決できませんでした。
どうぞよろしくお願い致します。
前提が不足しておりました、申し訳ございません。「#a1」と「#b1」を押してから「.enter」を押すことになります。各ボタン1つのみでは「.enter」を押しても何もアラートが出ないようにしたいです。
「#b2」「#b1」「#a2」「#a1」の場合は「b2とb1とa2とa1」ですか？「a1とa2とb1とb2」「b1とa1」？
a群とb群からひとつずつ選んで、アラートがその結果で変わるようにしたいのです。「#a1」と「#b1」を押した時に「これはa1とb1です」、「#a1」と「#b2」を押した時に「これはa1とb2です」、「#a2」と「#b1」を押した時に「これはa2とb1です」…のようにしたいと思っております。
このような場合、ラジオボタンかチェックボックスが普通だと思いますが、普通のボタンでいいのですか？
&( )という記述初めて見たのですが、これはどういったシンタックスなのでしょうか？
>naomi3様 普通のボタンで行いたいと考えております。該当部分のjavascriptは省略してしまったのですが、各ボタンをクリックすると色が変わるようにしております。
>turbgraphics200様 すみません、質問した際にミスしてしまいました。&ではなく$を書いております。
「#b1」「#a2」「#a1」の場合や、同じボタンが2回押された場合、どうなりますか？
同じボタンが2回押されると選択が外れるようにはしております。また、a群及びb群でひとつずつしかクリックできないようにもしております。
「しております」の部分のコードも提示されたほうがよいと思います。
>kei344様 ご指摘ありがとうございます。省略するべきではなかったと反省しております。質問下手で、わかりにくいことばかりしてしまい申し訳ございませんでした。次回質問させて頂く際には省略せずに記載致します。
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
ありがとうございます、一度解決済みにしたいと思います。
回答2件
0
ベストアンサー
なにを判断基準とするかでしょうね
本来であればhiddenなどでデータを保持するべきところでしょうけど
とりあえず今回はagunやbgunにdataをつけてみました
javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('.agun,.bgun').find('input[type=button]').on('click',function(){ 5 $(this).parents('div').data('val',$(this).attr('id')); 6 }); 7 $('.enter').on('click',function(){ 8 var flg=true; 9 var val=""; 10 $(this).parents('div').siblings('.agun,.bgun').each(function(){ 11 if($(this).data('val')!==undefined){ 12 val+=val!==""?"と":""; 13 val+=$(this).data('val'); 14 }else{ 15 flg=false; 16 }; 17 }); 18 if(flg) alert(val); 19 }); 20 $('[type=reset]').on('click',function(){ 21 $(this).parents('div').siblings('.agun,.bgun').removeData('val'); 22 }); 23}); 24</script> 25<div id="content"> 26 <form> 27 <div class="agun"> 28 <p> 29 <input type="button" id="a1" /> 30 <input type="button" id="a2" /> 31 </p> 32 </div> 33 <div class="bgun"> 34 <p> 35 <input type="button" id="b1" /> 36 <input type="button" id="b2" /> 37 </p> 38 </div> 39 <div> 40 <p> 41 <input type="button" value="入力" class="enter" /> 42 <input type="reset" /> 43 </p> 44 </div> 45 </form> 46</div>
投稿2017/01/29 05:12
総合スコア117904
できました！ありがとうございます！
0
JavaScript
1$(function() { 2 // ボタンのid→ボタンの選択状態へのマップ 3 var buttonsSelected = { 4 "a1" : false, 5 "a2" : false, 6 "b1" : false, 7 "b2" : false 8 }; 9 10 11 $("#a1, #a2, #b1, #b2").on('click', function() { 12 var buttonId = $(this).attr("id"); 13 // 各ボタンがクリックされたら、選択状態を反転 14 buttonsSelected[buttonId] = ! buttonsSelected[buttonId]; 15 }); 16 17 18 $(".enter").click(function() { 19 if ((! buttonsSelected["a1"] && ! buttonsSelected["a2"]) || 20 (! buttonsSelected["b1"] && ! buttonsSelected["b2"])) { 21 // a群、b群でそれぞれ1個もボタンが非選択状態なら、何もしない 22 return; 23 } 24 25 // 以降、アラートメッセージ文生成 26 var msg = ""; 27 28 for (var buttonId in buttonsSelected) { 29 if (buttonsSelected[buttonId]) { 30 // 選択状態のボタンのidをメッセージ文に追加 31 // 既にメッセージ文にボタンのidが追加されていれば "と" を入れる 32 msg += (msg === "" ? "" : "と") + buttonId; 33 } 34 } 35 36 msg = "これは" + msg + "です"; 37 38 alert(msg); 39 }); 40 41 42 $(":reset").on('click', function() { 43 // resetボタンがクリックされたら、すべてのボタンを非選択状態にする 44 for (var buttonId in buttonsSelected) { 45 buttonsSelected[buttonId] = false; 46 } 47 }); 48});
投稿2017/01/29 06:03
編集2017/01/29 06:19総合スコア1105
ありがとうございます。編集を頂いた後に試してみたのですが、ボタンをクリックしてもアラートが出てきてくれませんでした。
デベロッパーツールのコンソールも見てみたのですが、特にエラーが表示されないので、私の方で記述を間違えてしまったのでしょうか…？
使用ブラウザはchromeです。
「ボタンを1つしか押さない場合は「.enter」を押しても何もアラートが出ないようにしたい」の仕様通りになっていると思いますが。
ありがとうございます、見直してみます。
<script src="jquery-バージョン.js"></script>していますか？
あの後ログインしていなかっためお礼がとても遅れてしまいましたができました。ありがとうございました！
あなたの回答
tips
プレビュー
