Ich erstelle einige Modalitäten wie folgt:

<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>

Ich möchte die modalen IDs mit dem folgenden Skript in das Feld für die Schaltflächen-Daten-ID ändern:

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

Das Ändern des Modal-Headers funktioniert, der Modal-Name wird jedoch nicht geändert.

2
Mahdi 24 Feb. 2020 im 08:03

3 Antworten

Beste Antwort

Sie können find() nicht so verwenden, da wir mit der .find() -Methode die Nachkommen dieser Elemente im DOM-Baum durchsuchen können. Verwenden Sie next() mit find(), um ein Element abzurufen und Text zu ändern.

$(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>
1
Shree 24 Feb. 2020 im 05:51

Das folgende Skript ändert auch Ihre modale ID. Probieren Sie es aus:

$(document).on("click", ".student", function() {
    var stid = $(this).data('id');
    $(".modal-header h4").html(stid);
    $('.modal').attr('id', 'desired_id');
});
0
Saeed Jamali 24 Feb. 2020 im 06:38

Ihre jQuery ist falsch. Innerhalb der Klasse .modal-header gibt es in HTML kein h5 -Tag.

Sie können dies versuchen

$(document).on("click", ".student", function() {
        var stid = $(this).data('id');
        $(".modal-header h4").text(stid);
    });
0
Shahadat Hossain 24 Feb. 2020 im 05:16