Question

我目前在屏幕上有两个打开相同模式的按钮。但是，当我单击其中一个按钮时，两个模态都会弹出，当我只想要一个模态时，一个模态会彼此落后。我认为问题在于javascript正在使用类.modal__cancel-appointment遍历每个模态。但是我不确定如何更改javascript以仅打开一种模型。

(function ($, _) {
  'use strict'

  window.HERO = window.HERO || {}
  window.HERO.modals = window.HERO.modals || {}

  // CANCEL APPOINTMENT MODAL
  var CancelAppointmentModal = _.assign(
    Object.create(window.HERO.modals.Base),
    {
      addEventListeners: function () {
        this.$el
          .on('click', '.keep-appointment-button', this.close.bind(this))
          .on('click', '.cancel-appointment-button', this.cancelAppointment.bind(this))
      },

      cancelAppointment: function (evt) {
        var $button = $(evt.currentTarget)
        this.disableActions()
        $button.text($button.data('disable-with'))

        $.get($button.data('path'))
          .done(function (data) {
            Turbolinks.visit(data.redirect_to)
          }).fail(function (data) {
            console.error('Call to ' + evt.currentTarget.href + ' failed')
            Turbolinks.visit(data.redirect_to)
          })
      },

      disableActions: function () {
        this.$('.cancel-appointment-button').attr('disabled', true)
      }
    }
  )

  function initModals () {
    var $modals = $('.modal__cancel-appointment')
    $modals.each(function (index) {
      Object.create(CancelAppointmentModal).init($modals.eq(index))
    })
  }

  $(document).on('turbolinks:load', initModals)
})(
  window.jQuery,
  window._
)

这是我模型的顶部：

  <div class="modal modal__cancel-appointment"
    data-test-modal="cancel-appointment"
    data-width="540"
    data-modal-control=<%= "[data-modal-control='.modal__cancel-appointment-#{appointment.id}']" %>>

 <%= button_tag t("common.cancel_title"),
                              type: "button",
                              class: "dropdown-element cancel-appointment-dropdown-button",
                              data: { "modal-control" => ".modal__cancel-appointment-#{appointment.id}" } %>
              <%= render "shared/modal_cancel_appointment", appointment: appointment, invoice: invoice %>

                <%= button_tag "Cancel Appointment",
                                type: "button",
                                class: "hero-button hero-button--invoices",
                                data: { "modal-control" => ".modal__cancel-appointment-#{@appointment.id}" } %>

                <%= render "shared/modal_cancel_appointment", appointment: invoice.appointment, invoice: @invoice %>

单击一个按钮时会弹出两个模态

0 个答案: