JavaScript : how inject a variable with html content to a data-attribute appended?

Question

我希望在 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> &nbsp; Aperçu</a>');

        }

并且我的 HTML 输出返回此:

<a href="#" class="preview" data-toggle="popover" data-html="true" data-content="&lt;img src=" playerfiles="" img_0006.jpg"="" width="250" data-original-title="" title="" aria-describedby="popover45746">"&gt;<i class="fa fa-file-o"></i> &nbsp; Aperçu</a>

为什么不起作用？我该怎么办？

谢谢

Answer 1

您的代码的问题是预览值中存在特殊字符。如果您使用下面给出的代码，那么您可以覆盖该问题，这不是正确的方法并避免这种编码风格。对整数、小字符串值等使用数据属性。像 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> &nbsp; Aperçu</a>');

      $(".preview").data("content",preview);


}