###前提・実現したいこと
jQueryでCSVを読み込み、div要素を生成します。
チェックボックス#check input
にチェックを入れた場合はclass="num1"
の付いたdiv要素のみを生成し、チェックが外れた場合はclass="num0"
とclass="num1"
の両方のdiv要素を生成したいのですが、どのように書くのが宜しいでしょうか?
###現状のソースコード
javaScript
1var readCsv = { 2init: function () { 3var target = '#result'; 4var csvList; 5var insert = ''; 6 7$.ajax({ 8 url: 'csv/items.csv', 9 success: function (data) { 10 csvList = $.csv()(data); 11 12 for (var i = 1; i < csvList.length; i++) { 13 var $img = csvList[i][11]; 14 var $type = csvList[i][14]; //($typeには0もしくは1の数値が格納される) 15 var $html = '<div class="items num' + $type + '"><img src="images/' + $img + '" alt=""></div>' //加筆訂正:$imgPathを$imgに修正 16 insert += $html; 17 } 18 19 $(target).append(insert); 20 21 return (function () { 22 }()); 23 }, 24}); 25 26}, 27}; 28 29readCsv.init();
チェックボックスのhtmlはこのようなものです。
html
1<div id="check"> 2<label><input type="checkbox" class="btn"></label> 3</div>
ちなみにjQueryで生成された要素群は以下のようなものになるかと思います(デフォルト時、およびチェックボックスが外れた状態の時)。
html
1<div id="result"> 2<div class="items num0"><img src="images/gazou01.jpg" alt=""></div> 3<div class="items num1"><img src="images/gazou02.jpg" alt=""></div> 4<div class="items num0"><img src="images/gazou03.jpg" alt=""></div> 5<div class="items num1"><img src="images/gazou04.jpg" alt=""></div> 6<div class="items num1"><img src="images/gazou05.jpg" alt=""></div> 7</div>
チェックボックスが押された時は以下のようにclass="num1"
のみが生成されるようにしたいです。
html
1<div id="result"> 2<div class="items num1"><img src="images/gazou02.jpg" alt=""></div> 3<div class="items num1"><img src="images/gazou04.jpg" alt=""></div> 4<div class="items num1"><img src="images/gazou05.jpg" alt=""></div> 5</div>
以上、どうぞ宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/16 08:16
2017/10/16 08:18
退会済みユーザー
2017/10/17 09:09