###前提・実現したいこと
いつもお世話になっております。
先ほど、別の質問をしましたが、本タイトルの内容も自力では解決出来ていないため、質問させて頂きます。
先ほどの質問に合わせて質問させて頂くと、論点がぼやける懸念があるため、本タイトルで質問させて頂きます。
【実現したいこと】
HTML要素のlabelをクリックすると、inputのvalueが変化するプログラムを作りました。
※まずinputのvalueに0(ゼロ)をcheckedで設定しておき、
labelをクリックすると、inputのvalueが1 or 2 に変化します。
※inputのvalueを変化させる関数コードが多くなり、論点がばやけそうなため記載しておりません。
labelとinputが複数あるため、jQueryの.each()を利用し、まとめて算出出来ないか
試していますが、上手く出来ないためご教授頂きたいです。
※各inputのvalueを個々に持って来て合計を算出方法は出来ました。
本プラグラムは自分自身の学習用で3つしかinputのvalueが存在しないため、個々の値をそれぞれ持ってきても
問題ないのですが、大量の値を扱う場合の処理も勉強したいため、質問させて頂きます。
###該当のソースコード
javascript
1 $(".target label").click(function(){ 2 $(".target input").each(function(){ 3 var score = $(this).val(); 4 //console.logで各valueは確認できました。 5 console.log(score); 6 //合計を出すために配列に入れて、 7 //[0,1,0]などとし、 8 //下記for文を用いて 9 /* 10 var sum = function(array){ 11 var sum = 0; 12 for(var i=0,len=array.length; i<len; ++i){ 13 sum += array[i] 14 }; 15 return sum; 16 } 17 */ 18 //算出しようと考ええていますが、 19 //console.log()で配列の中身を確認すると配列に[0]のように各要素の1つの値しか 20 //代入されません。 21 //なにかしら良い方法や別の方法はないかご教授頂きたいです。 22 var array = [score]; 23 console.log(array); 24 }); 25 });
html
1 <div class="gameView"> 2 3 <!--各divのclass=targetにinputの各target(target1,2,3)を入れております。--> 4 <div class="target"> 5 6 <!-- target1のlabel --> 7 <label> 8 <input type="radio" name="target1" value="0" checked="checked"> 9 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 10 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 11 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 12 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 13 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 14 </label> 15 <div class="smoke"> 16 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 17 </div> 18 </div> 19 20 <div class="target"> 21 <!-- target2のlabel --> 22 <label> 23 <input type="radio" name="target2" value="0" checked="checked"> 24 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 25 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 26 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 27 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 28 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 29 </label> 30 <div class="smoke"> 31 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 32 </div> 33 </div> 34 35 <div class="target"> 36 <!-- target3のlabel --> 37 <label> 38 <input type="radio" name="target3" value="0" checked="checked"> 39 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 40 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 41 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 42 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 43 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 44 </label> 45 <div class="smoke"> 46 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 47 </div> 48 </div> 49 </div>
###試したこと#1
.changeを利用して値が変わるたびにvalueの値を取得しようと試みましたが、
changeが上手く発動せずに挫折しました。
javascript
1 //changeで各inputのvalueの取得を試みた結果、chageが発動しない 2 3 (function(){ 4 $(".target").each(function(){ 5 var label = $(this).find("label"); 6 //labelをクリックするとradioのvalueが変化するため 7 $(this).find("input[type='radio']").change(function(){ 8 //各inputのvalueを下記で取得し、変数eachLabelPointに代入し、 9 var eachLabelPoint = label.find("input").val(); 10 //変数sumで合計を算出しようとしました。 11 var sum = parseInt(eachLabelPoint+0); 12 console.log(sum); 13 $(".scoreImgGood p").text(sum); 14 }); 15 16 }); 17 })();
###試したこと#2
下記コードで個々に値を持ってきて、合計を算出する方法は出来ました。
javascript
1 //labelをclickした際にinputのvalueを別の関数で変化させて、 2 //※inputのvalueを変化させる関数は記載しておりません。 3 //下記関数で合計を算出しております。 4 $(".target label").click(function(){ 5 var target1 = parseInt($("input[name='target1']").val()); 6 var target2 = parseInt($("input[name='target2']").val()); 7 var target3 = parseInt($("input[name='target3']").val()); 8 console.log(target1,target2,target3); 9 var sum = target1+target2+target3; 10 $(".speechBalloonComment").text(sum); 11 });
回答2件
あなたの回答
tips
プレビュー