jquery, data-attributes, bootstrap modal

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