Question

我希望在DATA属性中插入一个包含HTML代码的变量（一个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

好吧，让我们先解决这个问题：你在预览var中有双引号你应该用＆＃39; \＆＃39; e.g：

var preview = '<img src=\"' + url + '\" width=\"250\">';

或更好地使用var

中的单引号

var preview = "<img src='" + url + "' width='250'>";

但是我认为在这个attr中存储html不是很好的方法 - 最好只在这里存储url和html在单独的模板中。或在页面加载时渲染隐藏元素

Answer 2

您的代码存在问题，预览值中有特殊字符。如果您使用下面给出的代码，那么您可以覆盖问题，这不是正确的方法，并避免这种编码风格。使用整数，小字符串值等的数据属性..像HTML或长字符串值等内容使用公共属性或隐藏控件。

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


}

Javascript：如何将带有html内容的变量注入到追加的数据属性中？

2 个答案: