Javascript: как добавить переменную с содержимым html в атрибут данных?

Question

Я хочу вставить переменную, которая содержит HTML-код в атрибуте DATA (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 или long string values ​​и т. Д., Либо используют общедоступные свойства или скрытые элементы управления.

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


} 

Answer 2

хорошо, позволяет исправить это для первого: у вас есть двойные кавычки в предпросмотра вар вы должны избавиться от них с «\» например:

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

или лучше использовать одинарные кавычки внутри вар

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

, но я думаю, что это не хороший подход для хранения HTML в этом ATTR - было бы лучше хранить здесь URL только и HTML в отдельный шаблон. или визуализировать скрытый элемент на загрузке страницы.