jquery，數據屬性，引導模式

Question

所以我真的是新的數據屬性的東西，我的jQuery技能是非常新鮮的。希望我問這個權利！

我想使用數據屬性將內容添加到引導模式。根據用戶點擊的圖片，他們會得到一個內容不同的模式。照片工作（其他人寫的），但我還需要添加文字。它從這裏開始，我在數據屬性中輸入我想要的內容。我加入了數據設爲myVal部分：

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

這裏是「通用」模式的代碼，每個光元素的使用：

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

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

}); 

我該如何編寫，以便我可以從data-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); 
    }); 
});