jquery, Datenattribute, bootstrap modal

Question

Also ich bin wirklich neu in der Datenattribut Sache und meine jquery Fähigkeiten sind ziemlich neu. Hoffentlich frag ich das richtig!

Ich möchte ein Datenattribut verwenden, um Inhalte zu einem Bootstrap-Modal hinzuzufügen. Je nachdem, auf welches Bild der Nutzer klickt, erhalten sie ein Modal mit unterschiedlichem Inhalt. Fotos funktionieren (jemand anderes hat es geschrieben), aber ich muss auch Text hinzufügen. Es fängt hier an, wo ich den Inhalt gebe, den ich in den Datenattributen will. Ich habe die Daten myval Teil:

<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text"> 

Hier ist die "generic" modal-Code, dass jeder der Fotoelemente verwendet:

<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <img src="" id="galleryImage" class="img-responsive" /> 
      <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div> 
      <p> 
       <br/> 
       <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button> 
      </p> 
     </div> 
    </div> 
    </div> 
</div> 

Und die Jquery, die Dinge läuft:

$('#galleryModal').on('show.bs.modal', function (e) { 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
    $('#galleryText').data('myval'); //this is the wrong part, but i want to put my text from data-myval into the modal at id galleryText 

}); 

Wie schreibe ich das, damit ich meinen Text aus dem Inhalt von data-myval hinzufügen kann?

Vielen Dank für Ihre Hilfe!

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/jv8dpv5x/

$('#galleryModal').on('show.bs.modal', function (e) { 
 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
 
    $('#galleryText').text($(e.relatedTarget).data('myval')); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text">Open Modal</a> 
 

 
<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <img src="" id="galleryImage" class="img-responsive" /> 
 
      <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div> 
 
      <p> 
 
       <br/> 
 
       <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button> 
 
      </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Änderung Code $('#galleryText').text($(e.relatedTarget).data('myval'));

Answer 2

Sie können den Datenattributwert genauso wie das src-Attribut abrufen.

$(document).ready(function(){ 
    $('#galleryModal').on('show.bs.modal', function (e) { 
    var text = $(e.relatedTarget).data('myval'); 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
    $('#galleryText').text(text); 
    }); 
});