Q&A
ご質問に挙げている HTML の中で、<ｃ" id="kindAmimal"> となっているのは、タイプミスでしょうか？まずはここを修正してみるとよいかもしれません。
条件のselectを変更すると、
結果も合わせて変化するjQueryが作りたいです。
現在のコードです。
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/test.js"></script> 9</head> 10 11<body> 12 <table id="sctTbl"> 13 <tr> 14 <td>￥</td> 15 <td id="rslBox"></td></tr> 16 <tr> 17 <td>動物</td> 18 <td> 19 <select name="kindAmimal" id="kindAmimal"> 20 <option value='ウサギ'>ウサギ</option> 21 <option value='イヌ'>イヌ</option> 22 <option value='ネコ'>ネコ</option> 23 <option value='トリ'>トリ</option> 24 </select></td></tr> 25 <tr> 26 <td>色</td> 27 <td> 28 <select name="kindColor" id="kindColor"> 29 <option value='赤'>赤</option> 30 <option value='青'>青</option> 31 <option value='黒'>黒</option> 32 <option value='緑'>緑</option> 33 </select></td></tr> 34 <tr> 35 <td>向き</td> 36 <td> 37 <select name="kindDirect" id="kindDirect"> 38 <option value='右向き'>右向き</option> 39 <option value='左向き'>左向き</option> 40 <option value='後向き'>後向き</option> 41 </select></td></tr> 42 </table> 43 44</body> 45</html>
javascript
1$(function() { 2 var kindAmimal = ''; 3 var kindColor = ''; 4 var kindDirect = ''; 5 6 $('select#kindAmimal,select#kindColor,select#kindDirect').change(function(){ 7 kindAmimal = $(this).val(); 8 9 if(kindAmimal == 'ウサギ'){ 10 if(kindColor == '赤'){ 11 $('#rslBox').html('<img src="/image/rabitRed.png">'); 12 } else if(kindColor == '青'){ 13 $('#rslBox').html('<img src="/image/rabitBlue.png">'); 14 } 15 } else if(kindAmimal == 'イヌ') { 16 $('#rslBox').html('<img src="/image/dogRed.png">'); 17 } else if(kindAmimal == 'ネコ') { 18 $('#rslBox').html('<img src="/image/catRed.png">'); 19 } else if(kindAmimal == 'トリ') { 20 $('#rslBox').html('<img src="/image/birdRed.png">'); 21 } 22 }) 23});
jQueryコードは.changeが発火しないため途中までしか書いていません。
やりたい事。
htmlの「select name="kindAmimal"」「select name="kindColor"」「select name="kindDirect"」をそれぞれ変更させると
選択されているselectの値を取得し、if文で選択した内容に沿った画像を出力したいです。
※画像はそれぞれ用意してあります。
「select name="kindDirect"」「select name="kindColor"」「select name="kindDirect"」３つの条件を選択した後、
「表示」などのボタンを押すことなく、selectを変更させるだけで画像を変化させたいです。
また可能な限りif文を短く、回数を減らせたら嬉しいです。
まずは.changeが発火しないため動作テストも出来ず困っております。
ご教授お願いいたします。
<ｃ" id="kindAmimal"> select要素の開始タグを間違えているのはコピペミスですか？
こちらコピペミスです。<select name="kindAmimal" id="kindAmimal">になっております。紛らわしくてすみません。
回答1件
0
ベストアンサー
まず, この問題はchangeイベントが着火する以前にJavaScriptとしての文法ミスが原因です.
innerHTMLに挿入している文字列リテラルの記述に問題があります.
JavaScript
1 if(kindAmimal == 'ウサギ'){ 2 $('#rslBox').html("<img src="/image/rabitRed.png">"); 3 } else if(kindAmimal == 'イヌ') { 4 $('#rslBox').html("<img src="/image/dogRed.png">"); 5 } else if(kindAmimal == 'ネコ') { 6 $('#rslBox').html("<img src="/image/catRed.png">"); 7 } else if(kindAmimal == 'トリ') { 8 $('#rslBox').html("<img src="/image/birdRed.png">"); 9 } 10
このように修正して下さい.
JavaScript
1 if(kindAmimal == 'ウサギ'){ 2 $('#rslBox').html('<img src="/image/rabitRed.png">'); 3 } else if(kindAmimal == 'イヌ') { 4 $('#rslBox').html('<img src="/image/dogRed.png">'); 5 } else if(kindAmimal == 'ネコ') { 6 $('#rslBox').html('<img src="/image/catRed.png">'); 7 } else if(kindAmimal == 'トリ') { 8 $('#rslBox').html('<img src="/image/birdRed.png">'); 9 }
NOTE:
このような初歩的なミスはWEBブラウザの開発者ツールで確認できますから, スクリプトが思い通りに動かない際はまず文法にミスがないかを検証して下さい.
「select name="kindDirect"」「select name="kindColor"」「select name="kindDirect"」３つの条件を選択した後、
「表示」などのボタンを押すことなく、selectを変更させるだけで画像を変化させたいです。
また可能な限りif文を短く、回数を減らせたら嬉しいです。
この手の問題はHTMLの構造やデータのもたせ方(つまり設計)いかんでどのようにもなるので, どうにも答えようがありません. …が, 例えば次のようにすればif文すら要らなくなります.
HTML
1<div id="out"></div> 2<div id="selects"> 3 <label>動物 4 <select id="kind"> 5 <option value="/image/eel.png">ウナギ</option> 6 <option value="/image/wolf.png">オオカミ</option> 7 <option value="/image/tiger.png">トラ</option> 8 </select> 9 </label> 10 <label>色 11 <select id="color"> 12 <option value="red">赤</option> 13 <option value="green">緑</option> 14 <option value="blue">青</option> 15 </select> 16 </label> 17 <label>位置 18 <select id="pos"> 19 <option value="left">左</option> 20 <option value="center">中央</option> 21 <option value="right">右</option> 22 </select> 23 </label> 24</div>
JavaScript
1selects.onchange = e => { 2 out.innerHTML = `<img src="${kind.value}" style="background-color:${color.value}"/>`; 3 out.style.textAlign = pos.value; 4};
投稿2018/03/18 01:50
編集2018/03/18 02:50総合スコア4756
コードありがとうございます。
ダブルクォーテーションとシングルクォーテーション盲点でした。
ですが、やはり.changeが発火しません。
JavaScriptコードの文法エラーが出ていないことは確認しましたか？
エラーが出ていましたのでコード修正しましたが、まだエラーが出ています。
```
$(function() {
var kindAmimal = '';
var kindColor = '';
var kindDirect = '';
$('select#kindAmimal').change(function(){
kindAmimal = $(this).val();
if(kindAmimal == 'ウサギ'){
$('#rslBox').html('<img src="/image/rabitRed.png">');
} else if(kindAmimal == 'イヌ') {
$('#rslBox').html('<img src="/image/dogRed.png">');
} else if(kindAmimal == 'ネコ') {
$('#rslBox').html('<img src="/image/catRed.png">');
} else if(kindAmimal == 'トリ') {
$('#rslBox').html('<img src="/image/birdRed.png">');
}
})
};
```
エラーメッセージ
Uncaught SyntaxError: missing ) after argument list
if文の閉じ部分の)は入れたのですが、間違っているでしょうか？
問題はそこじゃなくて, changeメソッドの()のとじカッコが無いところだと思うよ.
ありがとうございます。解決致しました！
色や向きの条件を入れたいのですが、if文を1度で済ませる方法はないでしょうか？
可能であれば.changeの外にif文を出して
.changeはそれぞれの変数設定のために使いたいのですがそういった使い方は出来ないのでしょうか？
.changeを使わない方法でも構いません。
コードありがとうございます。
色は背景色ではなく、画像の色、向きそのものを変更したいため、
書いて頂いたやり方では希望とは違うかなと思いました。すみません。
質問のJavascriptコードを書き直しました。
動物の部分「ウサギ」「イヌ」「ネコ」「トリ」は変更になるのですが、
その下の色部分のif文に入ってきません。
エラーは出ていません。
変数kindColorにselect要素の中身を入れて無ければそうなります.
また,
> 色は背景色ではなく、画像の色、向きそのものを変更したいため、
> 書いて頂いたやり方では希望とは違うかなと思いました。すみません。
「select要素から取得したvalue値で参照する画像のURLを組み立てる」ようにすればif文は必要なくなります.
kindColor = $('select#kindColor').val();
kindDirect = $('select#kindDirect').val();
上記2行を入れたら動きました。
ありがとうございました。練習のためif文を使いたく、やりたかった挙動も動作しました。
いずれif文を使わない方法も試してみようと思います。
ありがとうございました。
あなたの回答
tips
プレビュー
