JQuery を用いてテーブル内のimgタグに設定されているclass の属性値を追加・削除しようとしています。
チェックボックスの選択・解除によってclassの属性値を追加・削除するというものです。
<table class="table" id="tbl_image"> <tbody> <tr><th>画像1</th> <td><img src="/image/test1.jpg" class="thumb" /></td> <td><p><img src="/image/test.jpg" class="img-responsive" /></p></td> <td><input type="button" name="images0" class="update_image" value="更新する" /> </td> <td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ </td> </tr> <tr> <th>画像2</th> <td><img src="/image/test2.jpg" class="thumb" /></td> <td><p><img src="/image/test2.jpg" class="img-responsive" /></p> </td> <td><input type="button" name="images1" class="update_image" value="更新する" /> </td> <td><input type="checkbox" name="align" class="align-center" value="1" />中央寄せ </td> </tr> ・ ・ (中略) ・ ・ </tbody> </table>
このチェックボックスを選択すると以下のJavaScriptを駆動してimgタグ中のclass属性を追加削除したいです。
//チェックボックスをクリック $('input:checkbox').change(function(){ var num = $(".align-center").index(this); if($(this).prop("checked") == true){ $("tr:eq(" + num + ") td p img").addClass("center-block"); }else{ $("tr:eq(" + num + ") td p img").removeClass("center-block"); } });
alertでチェックボックスの選択状態の判定はうまくいっていますが、class属性の追加・削除の部分がうまく反映されていません。
どこがおかしいでしょうか?
宜しくお願いいたします。
(追記)pタグに囲まれたimg タグの文字列中にあるclass 属性部分のところを動的に変更したと思います。
(さらに追記)この場合の追記は文字列の置き換えになるのかな?と思えてきました。
replace()を使うんかな?と。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/02 06:12
2017/11/02 06:39
2017/11/02 06:49
2017/11/02 06:55
2017/11/02 07:05
2017/11/02 07:19