将值传递给 bootstrap 模态

Question

我正在尝试使用 JQUERY.

将值传递给 html 中的 modal

我有这个：

<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
    $(function() {
        $('#clientStatus').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes

            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('#clientCurrentStatus').val(clientCurrentStatus);
        });
    });
</script>

我想做的是在里面 data-clientCurrentStatus 我正在传递价值。然后在我的 modal 里面我有这个：

<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Current Status:</p>
              <input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
              <a href="/logout" class="btn btn-primary">Logout</a>
            </div>
          </div>
        </div>
      </div>

如您所见，id 匹配，所有匹配。我不确定为什么它不起作用。我正在像这样导入 jquery 标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

但没有任何效果。我该如何解决这个问题？

Answer 1

我认为可用于属性名称的内容存在一些问题：

http://html5doctor.com/html5-custom-data-attributes/

    $(function() {
        $('#clientStatus').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var client_current_status = button.data('client_current_status');
            var modal = $(this);
            modal.find('#clientCurrentStatus').val(client_current_status);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Current Status:</p>
              <input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
              <a href="/logout" class="btn btn-primary">Logout</a>
            </div>
          </div>
        </div>
      </div>
<button type = "button" class="btn btn-primary"  data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>

将值传递给 bootstrap 模态

passing values to bootstrap modal

html

javascript

jquery

bootstrap-modal