我有一组接受拒绝按钮。如果用户单击这些按钮，将显示单独的模型弹出窗口。接受和拒绝按钮链接具有单独的数据 ID 和数据操作。

我的目标是编写单个 javascript 函数来加载模型弹出窗口的内容，而不是重复模态代码。

再培训局代码

<% @non_claim_items.each do |damage_item| %>
  <tr>
    <td>
      <div class="input-prepend">
        <span class="add-on"><%= damage_item.estimated_total_repair_cost.currency %></span>
        <span class="uneditable-input input-small currency-format"><%= damage_item.estimated_total_repair_cost %></span>
      </div>
    </td>
    <td>
      <a data-toggle="modal" data-target="#acceptModel" data-id="<%= damage_item.id %>" data-action = 'accept' class="btn btn-small btn-primary">Accept</a>
      <a data-toggle="modal" data-target="#rejectModel" data-id="<%= damage_item.id %>" data-action = 'discuss' class="btn btn-small btn-default">Discuss</a>
    </td>

  </tr>
<% end %>

<div id="acceptModel" class="modal fade hide" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4><%= t('headings.damage_item.accept_damage') %></h4>
  </div>
  <div class="modal-body" style="max-height: 500px;">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" ><%= t('navigation.buttons.confirm') %></button>
    <button type="button" class="btn btn-default" data-dismiss="modal"><%= t('navigation.buttons.cancel') %></button>
  </div>
</div>
</div>

针对每个项目都有一个接受/讨论按钮，data_id 和数据操作是模型弹出的数据参数。

脚本

<script type="text/javascript">
      var damage_items = '<%= @non_claim_items.only(:id, :estimated_total_repair_cost, :damage_location_name ).to_json.html_safe %>';
      $('a[data-toggle=modal]').click(function () {
          if (typeof $(this).data('id') !== 'undefined') {

              data_id = $(this).data('id');
              action = $(this).data('action');
              setModelContent($(this), action, data_id)
          }
      });

      function setModelContent(modal, action, data_id) {
          if( action == 'accept')
          {
            // based on action need to set  the body of model pop up
          }
      }

</script>

1. 我需要帮助来编写一个 javascript 函数，该函数可以根据操作设置模型弹出窗口的主体。

2. 根据data_id，需要从damage_items javascript 变量中选取相应的数据，然后存储在jquery hash 中的数据需要显示在模型弹出体中。

最佳答案

你可以这样做:

function setModelContent(modal, action, data_id) {

  if (action == 'accept') {
    // based on action need to set  the body of model pop up
  }

  // Get damage item by data_id
  let damage_item = Object.entries(damage_items).filter(item => item[1].id == data_id);

  // Creating dynamically bootstrap elements and setting value of inputs by damage_item
  let fisrtLabel = $(document.createElement('label')).text('Cost:');
  let fistInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].estimated_total_repair_cost);

  let firstCol6 = $(document.createElement('div')).addClass('col-sm-6')
    .append(fisrtLabel)
    .append(fistInput);

  let secondLabel = $(document.createElement('label')).text('location name:');
  let secondInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].damage_location_name);

  let secondCol6 = $(document.createElement('div')).addClass('col-sm-6')
    .append(secondLabel)
    .append(secondInput);


  let formGroup = $(document.createElement('div'))
    .addClass('form-group')
    .append(firstCol6)
    .append(secondCol6);

  // Clearing modal-body and filling it by new elements
  $('#acceptModel').find('.modal-body').html("").append(formGroup);

}

Online demo (jsFiddle)

关于javascript - 基于所选链接的模态弹出窗口的动态内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51896206/