时间戳

首页 > 解决方案 > 动态更改的内容不会反映在 Bootstrap 模式中

javascript - 动态更改的内容不会反映在 Bootstrap 模式中

问题描述

我在下面的示例中简化了我的查询，但我正在尝试实现类似的目标。基本上，单选按钮的值应用于下一个按钮的 data-url 属性，并且模态将基于 URL 加载内容，但在此处的代码段中，我只是在模态正文中显示了 URL。正如您所看到的，当您选择一个单选并单击下一步时，将显示您首先选择的任何内容，并且任何后续选择都将被忽略，因为该变量仍保留第一个选择的选项。但是，该按钮具有正确的 URL，只是没有正确传递给模式。只是想知道如何解决这个问题，以便模式显示我在单选按钮中选择的正确 URL。任何帮助深表感谢。谢谢。

$('.js-url-check').on('change', function() {
  $('.js-url-btn').attr('data-url', this.value);
});

$('#exampleModal').on('show.bs.modal', function(e) {
  var button = $(e.relatedTarget);
  var modalBody = $(this).find('.modal-body');
  modalBody.html(button.data('url'));
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <title>JS Bin</title>
</head>

<body>
  <div style="margin: 20px">
    <div class="form-group">
      <fieldset>
        <legend>Select URL</legend>
        <div class="form-check form-check--radio">
          <input class="form-check-input js-mandatory js-url-check" id="google" name="SearchEngine" type="radio" value="https://google.com">
          <label for="google" class="form-check-label">Google</label>
        </div>
        <div class="form-check form-check--radio">
          <input class="form-check-input js-mandatory js-url-check" id="yahoo" name="SearchEngine" type="radio" value="https://yahoo.com">
          <label for="yahoo" class="form-check-label">Yahoo</label>
        </div>
        <div class="form-check form-check--radio">
          <input class="form-check-input js-mandatory js-url-check" id="msn" name="SearchEngine" type="radio" value="https://msn.com">
          <label for="msn" class="form-check-label">MSN</label>
        </div>
        <a href="#" data-url="" class="btn btn-primary js-url-btn mt-4" data-toggle="modal" target="_blank" data-target="#exampleModal">Next</a>
      </fieldset>
    </div>
  </div>

  <div class="modal" tabindex="-1" role="dialog" id="exampleModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

标签： javascriptjquerybootstrap-modal

解决方案

最后这是一个简单的修复 - 只需将“attr”更改为“data”。

推荐阅读