我希望在 DATA 属性中插入一个包含 HTML 代码的变量(a href ... data-content= ...),但效果不太好,因为插入的代码删除了一些字符,然后突然不显示正确地。
这是使用的代码
function uploadProgress(file)
{
var ext = file.split('.').pop();
var fileUrl = '/playerFiles/'+file;
if(ext == 'mp4')
{
var preview = '<video autoplay loop muted width="250"><source src="'+fileUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
}
else
{
var preview = '<img src="'+fileUrl+'" width="250">';
}
var showtime = $('#'+id).find('td.showtime');
showtime.html('<a href="#" class="preview" data-toggle="popover" data-html="true" data-content="'+preview+'"><i class="fa fa-file-o"></i> Aperçu</a>');
}
并且我的 HTML 输出返回此:
<a href="#" class="preview" data-toggle="popover" data-html="true" data-content="<img src=" playerfiles="" img_0006.jpg"="" width="250" data-original-title="" title="" aria-describedby="popover45746">"><i class="fa fa-file-o"></i> Aperçu</a>
为什么不起作用?我该怎么办?
谢谢
最佳答案
您的代码的问题是预览值中存在特殊字符。如果您使用下面给出的代码,那么您可以覆盖该问题,这不是正确的方法并避免这种编码风格。对整数、小字符串值等使用数据属性。像 html 或长字符串值等内容可以使用 public属性或隐藏控件。
function uploadProgress(file)
{
var ext = file.split('.').pop();
var fileUrl = '/playerFiles/'+file;
if(ext == 'mp4')
{
var preview = '<video autoplay loop muted width="250"><source src="'+fileUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
}
else
{
var preview = '<img src="'+fileUrl+'" width="250">';
}
var showtime = $('#'+id).find('td.showtime');
showtime.html('<a href="#" class="preview" data-toggle="popover" data-html="true" ><i class="fa fa-file-o"></i> Aperçu</a>');
$(".preview").data("content",preview);
}
关于JavaScript : how inject a variable with html content to a data-attribute appended?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28873867/