Question

在rails5中，我在索引页面中有以下内容：

<tbody>
  <% @properties_payments.each do |properties_payment| %>
    <tr>
      <td><%= properties_payment.property_id %></td>
      :
      :
      <td>
        <a class="property-update"  data-toggle="modal" data-
     target="#property-modal" data-attr='<%= properties_payment.id %>'>Update 
     Payment Transcation</a>
      </td>
    </tr>
  <% end %>
</tbody>

我有一个模态标题：

<div class="modal fade" id="property-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content"> 
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Property Payment Update</h4>
      </div>
      <div class="modal-body" id="test"></div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-default property-submit-status">Update</button>
       </div>
     </div>
   </div>
 </div>

现在使用脚本标记：

<script>
  $(document).ready(function (e) {
    $('.property-submit-status').on('click', function(e) {
      var payment_id =  $('#property-update').data('attr');
      e.preventDefault();
      e.stopPropagation();
      var postdata = { payment_id:payment_id };

      $.ajax({
        type: 'post',
        url: '/admin/properties/payments/update_transaction',
        data: postdata,
      }).done(function (data, textStatus, jqXHR) {
        $('.result').html(data);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        setNotification('error', 'Unknown Error. Try Again');
      });
    })
  });
</script>

我无法在data-attr中获取properties_payment.id的值，即var payment_id。我该如何实现这一目标？新手到JavaScript。

Answer 1

问题是你的php循环创建了多个

a.property-update

所以你不能简单地使用$('a.property-update').data('attr');，因为你总是得到第一个链接，而不是点击的链接。

你可以记住＆＃39;点击了哪个链接：

$('#property-modal').on('show.bs.modal', function (e) {
    $('#property-modal').data("link", $(e.relatedTarget));
});

然后在你的提交处理程序中：

$(document).on("click", ".property-submit-status", function(e) {
    var payment_id = $($('#property-modal').data("link")).data('attr');

修改：其他信息：

<a class="property-update" data-toggle="modal" data-target="#property-modal"
   data-payment-id='<%= properties_payment.id %>'
   data-bill-id='<%= properties_payment.bill_id %>'
   data-customer-inarreas='<%= properties_payment.customer_overdue %>'>
    Update Payment Transcation
</a>

以相同的方式阅读，使用变量来提高效率：

$(document).on("click", ".property-submit-status", function(e) {
    var button = $($('#property-modal').data("link"));
    var payment_id = button.data('payment-id');
    var showOverdueWarning = button.data('customer-inarreas') == 'true';

    load_bill(button.data("bill-id"));
});

Answer 2

问题是由于数据选择器错误。

你可以试试

$('a.property-update').data('attr');

Answer 3

请替换您的代码，

<td>
 <a class="property-update"  data-toggle="modal" data-target="#property-modal" data-property='<%= properties_payment.id%>'>Update 
     Paym

在js方法中，

$('.property-update').attr("data-property")

property-update是一个类，而不是html视图中的ID，因此请使用'。'而不是'＃'

如何在javascript和rails5中获取data-attr值？

3 个答案: