###前提・実現したいこと
RoRで、会員情報の更新ページ(edit)を作成中です。データベースに画像がすでに上がっているかに基づき、jQueryにてhtml要素を表示させたり非表示にさせたりしようと考えています。以下の状況を解決するヒントをいただきたく、よろしくお願いいたします。
###発生している問題
ページ遷移後、以下のようになります。データベース上に画像がありますので、.profilePhotoのみが表示、その下の.photoPreviewと.deletePhotoは非表示となっているのが正しい動作ですが、すべて表示されてしまっています。(参考元チュートリアル動画ではうまくいっています)。
上記の状態からページを更新すると、以下のように正しく動作します。
###該当のソースコード
html
<%= f.fields_for :org_contacts do |contact|%> <% if !@contactInfo["avatar"].blank? %> <%= image_tag @contactInfo.avatar_url(:medium).to_s, :class=>"profilePhoto" %> <% end %> <div class="photoPreview"> <i class="fa fa-upload photoUpload"></i> <p id="uploadClick">Click to Upload</p> </div> <%= contact.file_field :avatar, accept: 'image/png,image/gif,image/jpeg, image/jpg', id: 'uploadAvatar' %> <p class="deletePhoto">Delete</p> 以下省略
jQuery
var setupFieldsNeeded, setupManaged; $(document).ready(function() { var regions; $('.deletePhoto').hide(); if ($('.profilePhoto').length){ $('.photoPreview').hide() } $('.profilePhoto').click(function(){ $('.profilePhoto').hide(); $('.photoPreview').show().trigger('click'); }) $('.photoPreview').click(function(){ $(this).attr('disabled', 'true'); $('#uploadAvatar').trigger('click'); $("#uploadAvatar").change(function(){ $('.photoPreview').removeAttr('disabled'); readURL(this); }); }) function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.photoPreview').css('background', 'url(' + e.target.result + ')'); $('.photoUpload, #uploadClick').hide(); } $('.deletePhoto').show(); reader.readAsDataURL(input.files[0]); } } $('.deletePhoto').click(function() { $('.deletePhoto').hide(); $('#uploadAvatar').val(''); $('.photoPreview').css('background', ''); if ($('.profilePhoto').length){ $('.profilePhoto').show(); $('.photoPreview').hide() }else{ $('.photoUpload, #uploadClick').show(); } }); 以下省略
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/01 12:48
2017/09/01 13:35
2017/09/01 17:13
2017/09/02 11:09
2017/09/02 11:46 編集
2017/09/02 14:39