Bootstrap Идентификатор модальной настройки с использованием jquery не работает

Question

Я создаю некоторые модалы следующим образом:

<button type="button" class="btn btn-primary student" data-toggle="modal" data-target="#myModal" data-id={{item.st_number}}>
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Я хочу изменить модальные идентификаторы на поле data-id кнопки с помощью следующего скрипта:

    $(document).on("click", ".student", function() {
        var stid = $(this).data('id');
        $(".modal-header h5").html(stid);
        $(this).find('.myModal').text(stid);
    });

изменение модального заголовка работает, но модальное имя не изменяется.

Answer 1

Вы не можете использовать find() подобным образом, потому что метод .find() позволяет нам искать потомков этих элементов в дереве DOM. Используйте next() с find(), чтобы получить элемент и изменить текст.

$(document).on("click", ".student", function() {
  var stid = $(this).data('id');
  $(this).next('div').find(".modal-header h4").text(stid);
  $(this).next('div.modal').attr('id', stid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary student" data-toggle="modal" data-target="#myModal" data-id={{item.st_number}}>
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 2

Следующий скрипт также меняет ваш модальный идентификатор, попробуйте:

$(document).on("click", ".student", function() {
    var stid = $(this).data('id');
    $(".modal-header h4").html(stid);
    $('.modal').attr('id', 'desired_id');
});

Answer 3

ваш jQuery не так. в классе .modal-header нет тега h5.

Вы можете попробовать это

$(document).on("click", ".student", function() {
        var stid = $(this).data('id');
        $(".modal-header h4").text(stid);
    });