如何使用 Javascript 来操作模态内容？

Question

我正在使用引导模式和 Ruby on Rails。我能够很好地显示模态，但我无法使用 Javascript 来操作模态的内容。我不确定我做错了什么，但我根本无法使用 Javascript 来影响模式的内容，以至于我开始想知道 DOM 元素上是否存在不同的堆栈级别或者是否甚至模态内容也是 DOM 的一部分。

这是我的 app/views/home/index.haml：

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

视图包含打开模式的链接，在这种情况下@entry 代表一个图像对象。在 图像控制器 中，我们有 show 动作，我用它来显示模式：

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

对于模态视图，我有 app/view/show.js.erb

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

最后，我在 app/views/images/_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/

现在，当单击 class="detailers" 的链接时，我想隐藏和显示（切换）id="detail" 和 class="details" 的 div 的内容。我试图在 show.js.erb 中编写 Javascript 来操纵模式的内容，但没有成功。是否有某个地方我应该把我的 JS 来操作 JS 的内容？

Answer 1

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