いつもお世話になっております。
前回質問した内容の続きになりますが、教えていただきたく思います。
前提・実現したいこと
jquery(とLodash)を使用して、配列からデータを絞り込んで表示させようとしています。
イメージ図は下記になります。
発生している問題・エラーメッセージ
前回の質問で頂いた回答を元に上の図の①の「年代→名前への絞り込み」はクリアできたのですが、
同じように絞り込みの式を書けば表示できると思った②が作動しません。
該当のソースコード
jQuery
1(function() { 2 var allList = [ 3 { 4 age:"20", 5 name:"田中太郎", 6 chara:["A","B","D","A","C","B","B"], 7 skill:["炭酸飲料の一気飲み","グリーンピースの早食い","特技3","特技4","特技5","特技6","特技7"], 8 desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした","説明3","説明4","説明5","説明6","説明7"], 9 { 10 age:"20", 11 name:"鈴木花子", 12【以下、ずっと続きます】 13 ]; 14 15 function render() { 16 var list = _(allList).value(); 17 $('.productArea').html(productTemplate({list: list})); 18 }; 19 20 $('[name="age"]:radio').on('change',function(){ 21 var l2=allList.filter(function(x){ 22 return x.name==$('[name=name]:checked').val(); 23 }).map(function(x){ 24 return x.name; 25 }); 26 var html = ''; 27 l2.forEach(function (name) { 28 html += '<label><input type="radio" name="name" value="' + name + '"><span>' + name + '</span></label>'; 29 }); 30 document.querySelector('#filter_name').innerHTML = html; 31 }); 32 33 $(document).on('change','[name="name"]:radio',function(){ 34 var l2=allList.filter(function(x){ 35 return x.name==$('[name=name]:checked').val(); 36 }).map(function(x){ 37 return x.chara; 38 }); 39 var html = ''; 40 l2.forEach(function (chara) { 41 html += '<li class="productTitle"><span>' + chara + '</span></li>'; 42 }); 43 document.querySelector('#chara').innerHTML = html; 44 }); 45});
html
1<div id="filter_age"> 2 <label><input type="radio" name="age" value="20"><span>20代</span></label> | 3 <label><input type="radio" name="age" value="30"><span>30代</span></label> | 4 <label><input type="radio" name="age" value="40"><span>40代</span></label> | 5 <label><input type="radio" name="age" value="50"><span>50代</span></label> 6 7</div> 8 9<div class="productArea"> 10<script type="text/template" id="productTemplate"> 11 <div id="filter_name"></div> 12 <div id="info"> 13 <div class="product"> 14 <ul id="chara"></ul> 15 </div> 16 <div id="right"> 17 <table> 18 【テーブル(今回は省略)】 19 </table> 20 </div> 21 </div> 22</script> 23</div>
試したこと
最初は2つ目のラジオボタンを動かす関数を
jquery
1 $('[name="name"]:radio').on('change',function(){
と1つ目の関数とまったく同じようにしていましたが、検索したところ
「追加した要素に対してイベントを設定するにはここの記述を変えれば動作する」
と書いてあったので見よう見まねで変更しました。
しかしここを変えても動作しませんでした。
何度も質問して申し訳ありません。
解決方法が分かる方がいらっしゃいましたら、回答をよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/02 04:48
2018/12/02 04:51
2018/12/02 05:14
2018/12/02 05:33