如何使用Javascript來操作模態內容？

我使用引導模式和Ruby on Rails。我能夠顯示模態罰款，但我無法使用JavaScript來操縱模式的內容。我不知道我在做什麼錯誤，但我無法使用JavaScript來影響模式的內容，直到我開始想知道DOM元素上是否存在不同的堆棧級別這樣的事情，或者是否即使是模式內容也是DOM的一部分。如何使用Javascript來操作模態內容？

這裏是我的應用程序/視圖/家/ index.haml：

- url = @entry.class.to_s.downcase.singularize 
= link_to(send("#{url}_path", @entry), remote: true) do 
    = yield 
#modals

該視圖包含的鏈接，打開了模態在這種情況下@entry代表圖像對象。而在圖像控制器我們有表演動作，這我使用的顯示模式：

def show 
    authorize! :view, @image 
    @can_destroy = can?('delete_asset', @image) 
    @can_edit = can?('edit_metadata', @image) 
    respond_to do |format| 
    format.js 
    end 
end

，併爲模態的看法，我有應用程序/視圖/ show.js.erb

$("#modals").html('<%= j render "images/modal", image: @image %>'); 
$('#modals .modal').modal(); 
$('#modals .modal').modal('.toggle');

最後，我有模態分在app /視圖/圖片/ _modal.haml

.modal 
    .modal-dialog 
    .modal-content 
     .modal-header 
     = image_tag(@image.file_original.url(:modal)) 
     .modal-body 
     #shortdesc.row 
      .col-md-6 
      short description: #{@image.description_short} 
      .col-md-6.rightButton 
      %a.detailers 
       %span#toggle-text SHOW 
       DETAILS 
     %ul.errors 
     #detail.details{:style => "display: none"} 
      %div.modal-details 
      %i media type: 
      = @image.media_type 
      %br/ 
      %div.modal-details 
      %i subject: 
      = @image.subject 
      %br/ 
      %div.modal-details 
      %i title: 
      = @image.title 
      %br/ 
      %div.modal-details 
      %i full description: 
      = @image.description 
      %br/ 
      %div.modal-details 
      %i location: 
      = @image.location 
      %br/ 
      %div.modal-details 
      %i date: 
      %br/ 
      %div.modal-details 
      %i author: 
      = @image.author 
      %br/ 
      %div.modal-details 
      %i source: 
      = @image.source 
      %br/ 
      %div.modal-details 
      %i tags: 
      = @image.tag_list.join(' - ') 
      %br/ 
      %br/ 
      %div.modal-detailsgreen This item is shared by 
      %span.sharedbyfirstname 
      = @image.user.name_first 
      %span.sharedbylastname 
      = @image.user.name_last 
      %br/ 
      %br/

現在我想隱藏和s點擊鏈接class =「詳細信息」時，如何切換div的內容（id =「detail」和class =「details」）。我試圖在show.js.erb中編寫Javascript來操縱模式的內容而沒有成功。有沒有一個地方我應該把我的JS來操縱JS的內容？

來源

2016-09-19 codigomonstruo

$('#modals .modal').on('shown.bs.modal', function() { 
    // do something… 
});

來源

2016-09-19 04:41:28 gmrash

那麼首先應該在show.js.erb或home.js上使用它？其次，你將如何選擇「.detailer」類的鏈接。你會用$（'#modals .modal'a .detailer）嗎？你能否詳細說明你的答案，並至少指定你要寫的地方，以及如何選擇與.detailer類的鏈接？ – codigomonstruo

請編輯更多信息。僅限代碼和「嘗試這個」的答案是不鼓勵的，因爲它們不包含可搜索的內容，也不解釋爲什麼有人應該「嘗試這個」。 – abarisone

如何使用Javascript來操作模態內容？

回答

相關問題