jqueryの、データの属性、ブートストラップモーダル

Question

は、だから私は、データ属性のことで、本当に新しいですし、私のjqueryのスキルはかなり初心者くさいです。うまくいけば私はこの権利を求める！

私は、ブートストラップモーダルにコンテンツを追加するために、データ属性を使用します。ユーザーがクリックした画像に応じて、異なる内容のモーダルが得られます。写真は機能します（他の人が書きました）が、テキストを追加する必要があります。ここからは、データ属性に必要なコンテンツを入力します。私は、データmyval一部を追加しました：

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

物事を実行しますjqueryのを：ここで

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

は、写真要素のそれぞれが使用する、「ジェネリック」モーダルコードです

$('#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 

}); 

私は、データmyvalの内容から私のテキストを追加できるように、私はこれを書くにはどうすればよい

？

ありがとうございました！

Answer 1

あなたは、コードの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>

変更 $('#galleryText').text($(e.relatedTarget).data('myval'));

Answer 2

あなたは、src属性と同じように、データ属性値を取得することができます。ここで

$(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); 
    }); 
});