Q&A
UIが相当悪いのですが、このインタフェースでどうしても実現したいのでしょうか？
前提
html css,javascript,jQueryで料金シミュレーターを作っています。
現状:
ボタンをクリックするとタブが開き、中の選択肢を選ぶと次の選択肢に進んでいき（全部で４つ）一番右の回答ボタンを
押すと金額が表示されるといったものです。
中身はラジオボタンで、選択肢によって金額が変わります。
例「スポット1」→「症状4」→「種類3」→「6～10年」 白い□ボタン押下→〇〇円
実現したいこと:
・選択肢「スポット1」と「症状1」を続けて選択した場合のみ、それ以降何を選択しても
決まった数字、金額がでるようにしたいです。
例「スポット1」→「症状1」→「種類3」→「6～10年」 白い□ボタン押下→1000円
「スポット1」→「症状1」→「種類2」→「11～15年」 白い□ボタン押下→1000円
・「スポット1」と「症状1」をつづけて選択しない場合は４つの選択の合計値を計算。
「スポット３」→「症状1」→「種類2」→「11～15年」 白い□ボタン押下→1500円 等
ボタンのタブ切り替えにjqueryでかいています。
計算はjavascriptです。
何卒よろしくお願いいたします。
該当のソースコード
html
1 2ソースコード 3 4 <div class="sim-p"> 5 6 <div class="wrapper"> 7<!-- ボタン --> 8<div class="button-p"> 9 <button class="button-v" id="button-spot" onclick="openSpot(this)">スポット</button><!-- /.button-v #button-spot --> 10 <button class="button-v" id="button-symptom" onclick="openSymptom(this)">症状</button><!-- /.button-v #button-spot --> 11 <button class="button-v" id="button-type" onclick="openType(this)">種類</button><!-- /.button-v #button-spot --> 12 <button class="button-v" id="button-age" onclick="openAge(this)">年数</button><!-- /.button-v #button-spot --> 13</div><!-- /.button-p --> 14 <!-- ------ --> 15 16 <div class="sim-c"> 17 <div class="spot-tab"> 18 <div class="spot-sim-grid"> 19 <div class="button"><input id="spot1" type="radio" name="spot" value="100"><label for="spot1">スポット1</label></div><!-- /.button --> 20 21 <div class="button"><input id="spot2" type="radio" name="spot" value="200"><label for="spot2">スポット2</label></div><!-- /.button --> 22 23 <div class="button"><input id="spot3" type="radio" name="spot" value="300"><label for="spot3">スポット3</label></div><!-- /.button --> 24 25 <div class="button"><input id="spot4" type="radio" name="spot" value="400"><label for="spot4">スポット4</label></div><!-- /.button --> 26 27 </div><!-- /.spot-sim-grid --> 28</div><!-- /.spot-tab --> 29</div><!-- /.sim-c --> 30 31 32<div class="sim-c"> 33 <div class="symptom-tab"> 34 <div class="symptom-sim-grid"> 35<div class="button"><input id="symptom1" type="radio" name="symptom" value="100"><label for="symptom1">症状1</label></div><!-- /.button --> 36 37<div class="button"><input id="symptom2" type="radio" name="symptom" value="1200"><label for="symptom2">症状2</label></div><!-- /.button --> 38 39<div class="button"><input id="symptom3" type="radio" name="symptom" value="1300"><label for="symptom3">症状3</label></div><!-- /.button --> 40 41<div class="button"><input id="symptom4" type="radio" name="symptom" value="1400"><label for="symptom4">症状4</label></div><!-- /.button --> 42 43</div><!-- /.symptom-sim-grid --> 44</div><!-- /.symptom-tab --> 45</div><!-- /.sim-c --> 46 47 48 49<div class="sim-c"> 50 <div class="type-tab"> 51 <div class="type-sim-grid"> 52<div class="button"><input id="type1" type="radio" name="type" value="100"><label for="type1">種類1</label></div><!-- /.button --> 53 54<div class="button"><input id="type2" type="radio" name="type" value="200"><label for="type2">種類2</label></div><!-- /.button --> 55 56<div class="button"><input id="type3" type="radio" name="type" value="300"><label for="type3">種類3</label></div><!-- /.button --> 57 58<div class="button"><input id="type4" type="radio" name="type" value="400"><label for="type4">種類4</label></div><!-- /.button --> 59</div><!-- /.type-sim-grid --> 60</div><!-- /.type-tab --> 61</div><!-- /.sim-c --> 62 63 64<div class="sim-c"> 65 <div class="age-tab"> 66 <div class="age-sim-grid"> 67<div class="button"><input id="age1" type="radio" name="age" value="100"><label for="age1">1~5年</label></div><!-- /.button --> 68 69<div class="button"><input id="age2" type="radio" name="age" value="200"><label for="age2">6~10年</label></div><!-- /.button --> 70 71<div class="button"><input id="age3" type="radio" name="age" value="300"><label for="age3">11~15年</label></div><!-- /.button --> 72 73<div class="button"><input id="age4" type="radio" name="age" value="400"><label for="age4">16~20年</label></div><!-- /.button --> 74 75</div><!-- /.age-sim-grid --> 76</div><!-- /.age-tab --> 77</div><!-- /.sim-c --> 78 79 80 81 82</div><!-- /.wrapper --> 83<button id="result">結果 84<div class="total"> 85 <input type="text" readonly name="total" id="total" value="">円です 86 </div><!-- /.total --> 87</button><!-- /#result --> 88 89 90</div><!-- /.sim-p -->
css
1@charset "utf-8"; 2 3 4/* 共通 */ 5.sim-p { 6 display: flex; 7} 8 9 10input[type=radio] { 11 display: none; 12} 13 14label { 15 display: block; 16 background-color: aqua; 17 width: 100%; 18 height: 100%; 19 20} 21 22.button-v { 23 width: 120px; 24 height: 60px; 25 background-color:yellow; 26} 27 28.button { 29 width: 100px; 30 height: 50px; 31margin: 5px; 32border: solid 1px red; 33} 34 35 36/* ---- */ 37 38/* タブ非表示 */ 39.spot-tab { 40 display: none; 41} 42 43.symptom-tab { 44 display: none; 45} 46 47.type-tab { 48 display: none; 49} 50 51.age-tab { 52 display: none; 53} 54 55/* --------- */ 56 57 58/* 選択タブのグリッド */ 59.spot-sim-grid { 60 display: grid; 61 grid-template-columns: repeat(3, 100px); 62 grid-template-rows: repeat(3, 50px); 63 grid-column-gap: 2px; 64 grid-row-gap: 2px; 65} 66 67.symptom-sim-grid { 68 display: grid; 69 grid-template-columns: repeat(3, 100px); 70 grid-template-rows: repeat(5, 50px); 71 grid-column-gap: 2px; 72 grid-row-gap: 2px; 73} 74 75.type-sim-grid { 76 display: grid; 77 grid-template-columns: repeat(3, 100px); 78 grid-template-rows: repeat(2, 50px); 79 grid-column-gap: 2px; 80 grid-row-gap: 2px; 81} 82 83.age-sim-grid { 84 display: grid; 85 grid-template-columns: repeat(4, 100px); 86 grid-template-rows: repeat(2, 50px); 87 grid-column-gap: 2px; 88 grid-row-gap: 2px; 89} 90 91 92 93/* ----------------- */ 94 95/* 合計金額非表示にしておく */ 96.total { 97 display: none; 98} 99 100/* 合計ボタン */ 101 102 103#result { 104 width: 150px; 105 height: 100px; 106 background-color: #fff; 107} 108 109#total { 110 border: none; 111 outline: none; 112 width: 100%; 113 height: 100%; 114 font-size: 2rem; 115 116}
javascript
1 2// button式の合計 3 4document.addEventListener('change', e => { 5 if (e.target.closest('[type=radio]')) { 6 var sum = [...document.querySelectorAll('[type=radio]:checked')].reduce((x, y) => x + parseInt(y.value), 0); 7 total.value = sum; 8 } 9}); 10 11//-----計算ここまで 12 13 14//-------------以下jQueryです。 15// button-tab表示 16$(function () { 17 $("#button-spot").click(function () { 18 $(".spot-tab").slideToggle(100); 19 }); 20 21 $("#button-symptom").click(function () { 22 $(".symptom-tab").slideToggle(100); 23 }); 24 25 $("#button-type").click(function () { 26 $(".type-tab").slideToggle(100); 27 }); 28 29 $("#button-age").click(function () { 30 $(".age-tab").slideToggle(100); 31 }); 32}); 33 34 35// button押下でbutton-tab消える 36$(function () { 37 $(".button").click(function () { 38 $(".spot-tab , .symptom-tab , .type-tab , .age-tab").hide(); 39 }); 40}); 41 42// 箇所タブのボタン押下したら次々進む 43$(function () { 44 $(".spot-tab .button").click(function () { 45 $(".spot-tab").hide(), 46 $(".symptom-tab").show(); 47 }); 48 49 $(".symptom-tab .button").click(function () { 50 $(".symptom-tab").hide(), 51 $(".type-tab").show(); 52 }); 53 54 $(".symptom-tab .button").click(function () { 55 $(".symptom-tab").hide(), 56 $(".type-tab").show(); 57 }); 58 59 $(".type-tab .button").click(function () { 60 $(".type-tab").hide(), 61 $(".age-tab").show(); 62 }); 63}); 64 65 66 67// 別タブを開くと現在タブを非表示 68$(function () { 69 $(".button-v:first-child").click(function () { 70 $(".symptom-tab , .type-tab , .age-tab").hide(); 71 }); 72 73 $(".button-v:nth-child(2)").click(function () { 74 $(".spot-tab , .type-tab , .age-tab").hide(); 75 }); 76 77 $(".button-v:nth-child(3)").click(function () { 78 $(".spot-tab , .symptom-tab , .age-tab").hide(); 79 }); 80 81 $(".button-v:nth-child(4)").click(function () { 82 $(".spot-tab , .symptom-tab , .type-tab").hide(); 83 }); 84}); 85 86 87// 合計ボタン押したら表示,他ボタン押したら非表示 88$(function () { 89 $("#result").click(function () { 90 $(".total").show(); 91 }); 92 93 $(".button").click(function () { 94 $(".total").hide(); 95 }); 96 97 $(".button-v").click(function () { 98 $(".total").hide(); 99 }); 100}); 101
はじめてteratailに質問したので至らない点がありましたら、申し訳ありません。
getElementById()などで該当するシチュエーションのときのみ別処理ができないか
試行錯誤したうえで行き詰まり、今に至ります。
>UIが相当悪い
仕組み構築後にUIに配慮した仕様にする予定なので、あえてこの状態にしております。
ご助力・ご指摘お願いいたします。
よろしくお願いいたします。
回答1件
0
ベストアンサー
ご質問の件にだけお答えすると、処理的には結構単純で、三項演算子でsumの値を分岐させてみました。
- sumの値は、要素
id="spot1"およびid="symptom1"が選択されていたら、- sum = 1000
- そうでなければ、sum = 全部のラジオボタンの合計
javascript
1// button式の合計 2 3document.addEventListener('change', calcSum); 4 5function calcSum(e) { 6 if (e.target.closest('[type=radio]')) { 7 const spot1 = document.querySelector('#spot1'); 8 const symptom1 = document.querySelector('#symptom1'); 9 const sum = (spot1.checked && symptom1.checked) ? 1000 : [...document.querySelectorAll('[type=radio]:checked')].reduce((x, y) => x + parseInt(y.value), 0); 10 total.value = sum; 11 } 12} 13 14//-----計算ここまで
エラーがでていますので不要なonclickイベントは削除しておいたほうがいいかもしれません。
diff
1- <button class="button-v" id="button-spot" onclick="openSpot(this)">スポット</button><!-- /.button-v #button-spot --> 2- <button class="button-v" id="button-symptom" onclick="openSymptom(this)">症状</button><!-- /.button-v #button-spot --> 3- <button class="button-v" id="button-type" onclick="openType(this)">種類</button><!-- /.button-v #button-spot --> 4- <button class="button-v" id="button-age" onclick="openAge(this)">年数</button><!-- /.button-v #button-spot --> 5+ <button class="button-v" id="button-spot">スポット</button><!-- /.button-v #button-spot --> 6+ <button class="button-v" id="button-symptom">症状</button><!-- /.button-v #button-spot --> 7+ <button class="button-v" id="button-type">種類</button><!-- /.button-v #button-spot --> 8+ <button class="button-v" id="button-age">年数</button><!-- /.button-v #button-spot -->
投稿2022/10/17 07:37
総合スコア2314
ありがとうございます！
三項演算子で分岐させるのは見落としておりました。
勉強不足でした。
idを設定しているのでそこから何とかできないかと、別の方法ばかり探しておりました。
onclickイベントについてもご指摘いただきありがとうございます。
大変参考になりました。
ありがとうございました。
あなたの回答
tips
プレビュー
