すること
画像添付中の画像添付ボタンのスタイルを変える方法です。
使うもの
- jquery
- css(scss)
処理の流れ
1.添付中は特定のclassを付与
2.上記で付与されたclassのstyleがついて色が変わる
３.送信したら特定のclassを削除
４.classが削除されたことによってstyleも削除されて色が元に戻る
書くコード
nantoka.js
// 画像を添付した時に着火するイベント$('input[type=file]').change(function(){$('色を変えたい要素のセレクタ').addClass('active');//class「active」をつける});// 送信で着火するイベント$('送信ボタンのセレクタ').submit(function(){.done(function(){// ~ 送信処理省略 ~//$('色を変えたい要素のセレクタ').removeClass('active');// ←.doneの最後でclass削除を処理}).fail(function(){});});上記のjQueryのclass付与でstyleが効くように、cssも定義します。
nantoka.css
.btn.active{background-color:#38aef0;/* span、divなどでボタン作った方はこれ */color:#38aef0;/* FontAwesomeの色変更はこっち */}実行結果
無事に添付ボタンの色を変更できました。
簡単にできるので、jQuery苦手なかたもチャレンジしてみてください。
小さなできたを楽しみましょう！
参考サイト
ファイルアップロードの参照ボタンの変更設定
http://php.o0o0.jp/article/jquery-upload_button