Q&A
bgColor bgPattern patternColor に該当するElementが提示されていないので、情報が不足しています。
複数の条件に応じて、結果を変えるという動作をjQuery(JavaScript)で実行したいと思います。
条件1：背景色
条件2：背景柄
条件3：背景柄の色
条件1で青を選択、条件2でドット、条件3で白を選択した場合
青い背景に白のドット柄が表示されるといったイメージです。
現在書いているコード
html
1<table> 2<tr><td colspa="2" id="result"></td></tr> 3<tr><td>条件1</td><td id="select1"></td></tr> 4<tr><td>条件2</td><td id="select2"></td></tr> 5<tr><td>条件3</td><td id="select3"></td></tr> 6</table>
希望する結果表示
html
1<table> 2<tr><td colspa="2" id="result">青背景に白ドット</td></tr> 3<tr><td>条件1</td><td id="select1">青</td></tr> 4<tr><td>条件2</td><td id="select2">ドット</td></tr> 5<tr><td>条件3</td><td id="select3">白</td></tr> 6</table>
条件はそれぞれtableの一覧から取得したく、その部分のjQueryは以下のように記述し、
それぞれのセルから値の取得は出来ております。
外部読み込みしている「js.js」の中身は以下になります。
jQuery
1$(function() { 2 $('.bgColor').on('click',function(){ 3 var bgColor= $(this).text(); 4 $('#select1').text(bgColor); 5 }) 6 $('.bgPattern').on('click',function(){ 7 var bgPattern= $(this).text(); 8 $('#select2').text(bgPattern); 9 }) 10 $('.patternColor').on('click',function(){ 11 var patternColor= $(this).text(); 12 $('#select3').text(patternColor); 13 }) 14});
やりたい事は
「select1」、「select2」、「select3」が全て埋まったら
「result」に結果を表示させる事です。
「select1」が「blue」、
「select2」が「dot」、
「select3」が「white」という選択だった場合、
また常に「select1」、「select2」、「select3」を監視し、
変更があるたびに「result」に結果を書き換えたいです。
出来れば結果表示などのボタン(on.click)は使用せず
tableの条件を選択すると自動的に結果が変わるようにしたいです。
失礼致しました。追記致します。
jQueryでのtableセルから情報を取得している部分は以下になります。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="/test/style.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 8 <script type="text/javascript" src="/test/js.js"></script> 9</head> 10 11<body> 12 <table> 13 <tr> 14 <th>bgColor</th> 15 <td class="bgColor">red</td> 16 <td class="bgColor">pink</td> 17 <td class="bgColor">yellow</td> 18 <td class="bgColor">brown</td> 19 <td class="bgColor">blue</td> 20 <td class="bgColor">black</td> 21 </tr> 22 <tr> 23 <th>bgPattern</th> 24 <td class="bgPattern">dot</td> 25 <td class="bgPattern">check</td> 26 <td class="bgPattern">border-x</td> 27 <td class="bgPattern">border-y</td> 28 <td class="bgPattern">heart</td> 29 <td class="bgPattern">star</td> 30 </tr> 31 <tr> 32 <th>patternColor</th> 33 <td class="patternColor">white</td> 34 <td class="patternColor">gray</td> 35 <td class="patternColor">aqua</td> 36 <td class="patternColor">green</td> 37 <td class="patternColor">orange</td> 38 <td class="patternColor">purple</td> 39 </tr> 40 </table> 41 42 <table> 43 <tr><td colspa="2" id="result"></td></tr> 44 <tr><td>条件1</td><td id="select1"></td></tr> 45 <tr><td>条件2</td><td id="select2"></td></tr> 46 <tr><td>条件3</td><td id="select3"></td></tr> 47 </table> 48 49 50</body> 51</html>
条件選択tableのhtmlを追記致しました。これでご要望に沿っているでしょうか？
このHTMLは同一のページなのか、別のページなのか読み取れません。お手元のソースコードをありのまま記載することをお勧めします。
htmlコード修正致しました。js、cssファイルは外部になります。どうぞよろしくお願いいたします。
「「result」に結果を表示させる」とは具体的にどのように何を表示したいのですか？
「tableの条件を選択する」とは具体的に何をトリガーにしたいのでしょうか？
結果表示について追記致しました。トリガーについては条件tableのセルをクリックすると条件tableのセルに値が入るようになっていますので条件tableセルのクリックがトリガーだと思っていますが間違っているでしょうか？
その前に書いてある「結果表示などのボタン(on.click)は使用せず」の表現が紛らわしかったのと、tableにはselect というインベントがないので、クリックと書いて欲しかった。
失礼致しました。結果表示のためのボタン(on.click)などは使用せず、条件tableのセルを選択するたびに選択結果用のtable(下のtableです)に値が入り、その結果によって<td colspa="2" id="result"></td>が変化する事が希望です。
blue = 青とするようなマッピングはどうするの？
後にif文で書き換えるつもりですが、とりあえずは<td id="select1"></td>、<td id="select2"></td>、<td id="select3"></td>に中身が入ったら<td colspa="2" id="result"></td>に何かが表示されるような処理を教えて頂きたいです。
回答1件
0
ベストアンサー
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 7 <body> 8 <table id="selection"> 9 <tr> 10 <th>bgColor</th> 11 <td class="bgColor">red</td> 12 <td class="bgColor">pink</td> 13 <td class="bgColor">yellow</td> 14 <td class="bgColor">brown</td> 15 <td class="bgColor">blue</td> 16 <td class="bgColor">black</td> 17 </tr> 18 <tr> 19 <th>bgPattern</th> 20 <td class="bgPattern">dot</td> 21 <td class="bgPattern">check</td> 22 <td class="bgPattern">border-x</td> 23 <td class="bgPattern">border-y</td> 24 <td class="bgPattern">heart</td> 25 <td class="bgPattern">star</td> 26 </tr> 27 <tr> 28 <th>patternColor</th> 29 <td class="patternColor">white</td> 30 <td class="patternColor">gray</td> 31 <td class="patternColor">aqua</td> 32 <td class="patternColor">green</td> 33 <td class="patternColor">orange</td> 34 <td class="patternColor">purple</td> 35 </tr> 36 </table> 37 38 <table> 39 <tr><td colspa="2" id="result"></td></tr> 40 <tr><td>条件1</td><td id="select1"></td></tr> 41 <tr><td>条件2</td><td id="select2"></td></tr> 42 <tr><td>条件3</td><td id="select3"></td></tr> 43 </table> 44 45 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 46 <script type="text/javascript"> 47 48 var bgColor = ''; 49 var bgPattern = ''; 50 var patternColor = ''; 51 52 $("table#selection td").on('click', function () { 53 54 if ($(this).hasClass("bgColor")) { 55 bgColor = $(this).text(); 56 $("#select1").text(bgColor); 57 } else if ($(this).hasClass("bgPattern")) { 58 bgPattern = $(this).text(); 59 $("#select2").text(bgPattern); 60 } else if ($(this).hasClass("patternColor")) { 61 patternColor = $(this).text(); 62 $("#select3").text(patternColor); 63 } 64 65 if (bgColor != "" && bgPattern != "" && patternColor != "") { 66 var msg = bgColor + 'に' + patternColor + 'の' + bgPattern; 67 $("#result").text(msg); 68 } 69 }); 70 </script> 71 </body> 72</html>
投稿2018/03/15 15:43
編集2018/03/15 15:51退会済みユーザー
総合スコア0
ありがとうございます。
やりたかった事が実装できました！
ソースコードを描いてあげることは目的ではないので、理解してくださいな。あと、質問の訂正依頼にあることをちゃんと言語化（日本語で）できるようになると自ずとコードは書けるようになります。
具体的に何が何をいつどのように、を明らかにすればそれをプログラミングするだけです。
あなたの回答
tips
プレビュー
