
ドローソフトで作成した3層になっているレイヤーの表示・非表示を制御したい。(SVG)
・同じ領域なので同時にvisibleになることは許されない
・読み込んだ際に3つ全てhide()にしている
・on 'click'でAがクリックされたときBが出ていたらBを隠してAを出すなどの条件式をせっせか書いたが、反応がない。
・on('click',function()){
alert('クリック')}としたらアラートは出る
・原因がわかりません。ご教授願います。
・ちなみに指定しているidはレイヤーです。その辺りに原因があるのでしょうか。レイヤーは指定できないからオブジェクトを指定しなければいけない?←まだ試していない
追加情報・jqueryバージョン jquery-3.3.1
現状
javascript
1 2 3 $(function () { 4 //画面初期化 5 6 $('#A').hide(); 7 $('#B').hide(); 8 $('#C').hide(); 9 10 }); 11 12//ボタンA押下処理 13 $(window).on('load', function () { 14 $('.ボタンA').on('click', function () { 15 if ($('#A').is(':hidden') && $('#B').is(':hidden') && $('#C').is(':hidden')) { 16 $('#A').show(); 17 } else if ($('#A').is(':visible')) { 18 $('#A').hide(); 19 } else if ($('#B').is(':visible')) { 20 $('#B').hide(); 21 $('#A').show(); 22 } else if ($('#C').is(':visible')) { 23 $('#C').hide(); 24 $('#A').show(); 25 } else { 26 alert('error'); 27 } 28 29 }); 30 }); 31 32 //ボタンB押下時処理 33 $(window).on('load', function () { 34 $('.ボタンB').on('click', function () { 35 if (($('#B').is(':visible'))) { 36 $('#B').hide(); 37 } else if (($('#A').is(':visible'))) { 38 $('#A').hide(); 39 $('#B').show(); 40 } else if (($('#B').is(':hidden')) && (($('#A').is(':hidden')) && (($('#C').is(':hidden'))))) { 41 $('#B').show(); 42 } else if (($('#C').is(':visible'))) { 43 $('#C').hide(); 44 $('#B').show(); 45 } 46 47 }); 48 }); 49 50 //ボタンC押下時処理 51 $(window).on('load', function () { 52 $('.ボタンC').on('click', function () { 53 if (($('#C').is(':visible'))) { 54 $('#C').hide(); 55 } else if (($('#A').is(':visible'))) { 56 $('#A').hide(); 57 $('#C').show(); 58 } else if (($('#B').is(':hidden')) && (($('#A').is(':hidden')) && (($('#C').is(':hidden'))))) { 59 $('#C').show(); 60 } else if (($('#B').is(':visible'))) { 61 $('#B').hide(); 62 $('#C').show(); 63 } 64 65 }); 66 });