jquery - 格式化文本的数据标题中的 HTML 代码
问题描述
我正在尝试使用 Bootstrap 和 jQuery 模态对话框。数据来自锚点的数据标题。但在 data-caption 中,文本必须格式化为 HTML 标签。
这是代码:
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Some title" data-caption="<p>DATA CAPTION</p>" data-image="img.jpg" data-target="#image-gallery">
顺便说一句,模态代码是:
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="image-gallery-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Kapat</span></button>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-fluid" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Geri</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
This text will be overwritten by jQuery
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">İleri</button>
</div>
</div>
</div>
</div>
</div>
编辑:jQuery 代码:
$(document).ready(function(){
loadGallery(true, 'a.thumbnail');
});
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function(){
if($(this).attr('id') == 'show-previous-image'){
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}
一切都很好,除了文本格式。" <p>DATA CAPTION</p>
" 显示为文本,而不是 HTML。
如何在模态标题中使其格式化文本?
解决方案
尝试更改此行
$('#image-gallery-caption').html($sel.data('caption'));
推荐阅读
- javascript - Highcharts:如何格式化 x 轴,以便表格中的实际日期/时间出现在每个 y 上
- javascript - Angular/Cordova:Android 设备上的 MIME 类型问题
- node.js - `fs.readFile` 是否等同于 `setTimeout(fs.readFileSync)`?
- hyperledger-fabric - 如何为结构 CA 使用加密配置文件
- python - FileNotFoundError:[Errno 2] 文件 b'smallsample.csv' 不存在:b'smallsample.csv'
- javascript - Unicode RegEx 不匹配外来字符
- facebook-graph-api - Coldfusion - 使用消息、图像和 URL 发布到 FB 提要
- flutter - Flutter 中的容器和列小部件有什么区别?
- python - python中不规则网格上的二维插值
- fedora - Fedora 28 未启动:“acpi MST0101:00:平台设备创建失败”