jQuery　値が入ったら処理を実行したい

bgColor	red	pink	yellow	brown	blue	black
bgPattern	dot	check	border-x	border-y	heart	star
patternColor	white	gray	aqua	green	orange	purple

bgColor	red	pink	yellow	brown	blue	black
bgPattern	dot	check	border-x	border-y	heart	star
patternColor	white	gray	aqua	green	orange	purple

複数の条件に応じて、結果を変えるという動作を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」という選択だった場合、

<td colspa="2" id="result"> </td>の中身に「青背景に白ドット」というテキストを表示させたいです。結果についてはif文で条件を書き、テキスト変換し<td>の中にjQueryで書き込む事を希望しています。

また常に「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>

退会済みユーザー

2018/03/15 14:59

bgColor bgPattern patternColor に該当するElementが提示されていないので、情報が不足しています。

uzr1709

2018/03/15 15:05

条件選択tableのhtmlを追記致しました。これでご要望に沿っているでしょうか？

退会済みユーザー

2018/03/15 15:07

このHTMLは同一のページなのか、別のページなのか読み取れません。お手元のソースコードをありのまま記載することをお勧めします。

uzr1709

2018/03/15 15:13

htmlコード修正致しました。js、cssファイルは外部になります。どうぞよろしくお願いいたします。

退会済みユーザー

2018/03/15 15:17

「「result」に結果を表示させる」とは具体的にどのように何を表示したいのですか？

退会済みユーザー

2018/03/15 15:21

「tableの条件を選択する」とは具体的に何をトリガーにしたいのでしょうか？

uzr1709

2018/03/15 15:24

結果表示について追記致しました。トリガーについては条件tableのセルをクリックすると条件tableのセルに値が入るようになっていますので条件tableセルのクリックがトリガーだと思っていますが間違っているでしょうか？

退会済みユーザー

2018/03/15 15:26

その前に書いてある「結果表示などのボタン(on.click)は使用せず」の表現が紛らわしかったのと、tableにはselect というインベントがないので、クリックと書いて欲しかった。

uzr1709

2018/03/15 15:31

失礼致しました。結果表示のためのボタン(on.click)などは使用せず、条件tableのセルを選択するたびに選択結果用のtable(下のtableです)に値が入り、その結果によって<td colspa="2" id="result"></td>が変化する事が希望です。

退会済みユーザー

2018/03/15 15:34

blue = 青とするようなマッピングはどうするの？

uzr1709

2018/03/15 15:37

後にif文で書き換えるつもりですが、とりあえずは<td id="select1"></td>、<td id="select2"></td>、<td id="select3"></td>に中身が入ったら<td colspa="2" id="result"></td>に何かが表示されるような処理を教えて頂きたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

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>