Я создаю несколько каруселей на веб-странице с помощью jQuery, вызывая всю необходимую мне информацию с YouTube с помощью YouTube Data API v3.
После выполнения проектирования и функций я борюсь с одной простой вещью, которую я не могу понять.
Я использую append(``), чтобы я мог добавить весь необходимый мне HTML-элемент к нужному элементу, а также вставить другую информацию с переменными в нотацию ${var}.
Все отлично работает, КРОМЕ для одной строковой переменной preview. Это похоже на то, что оно не распознается как переменная и в конечном выводе отображается как строковый чанк
Теперь немного кода.
Это подготовка к вызову функции, которая загружает все:
jQuery(document).ready(function () {
var apikey = 'my-api-key';
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
var playlists = {
1: 'PL549CFEF61BF98279',
2: 'PLX_IxBH-yGtonzSE2zyplhI2oky7FWvbE',
3: 'PL038B3F56D598DD61',
4: 'PLDDFDDD10E5584056',
5: 'PLD4F65416EB11640F',
}
loadVids(apikey, URL, playlists);
});
Далее loadVids , для каждого вызова списка воспроизведения YouTube getJSON() и получения данных:
function loadVids(apikey, URL, playlists) {
for (const menuid in playlists) {
var options = { part: 'snippet', key: apikey, maxResults: 20, playlistId: playlists[menuid] }
jQuery.getJSON(URL, options, function (data) {
resultsLoop(data, menuid, apikey);
});
}
}
затем resultLoop с использованием each() помещает всю информацию в некоторый HTML-код, который будет добавлен где-то на веб-странице (я удалил все исходные атрибуты, чтобы сделать его читаемым).
function resultsLoop(data, menuid) {
jQuery.each(data.items, function () {
var alttext = this.snippet.title;
var title = alttext.substring(0, 57) + '…'
var vid = this.snippet.resourceId.videoId;
var preview = this.snippet.thumbnails.standard.url;
jQuery("#carousel-" + menuid + " ul")
.append(`
<li>
<article>
<div>
<a href="//www.youtube.com/watch?v=${vid}&fs=1&autoplay=0&rel=0">
<img alt="${alttext}" src="${preview}">
</a>
</div>
<div>
<h4><a href="/index.php?Itemid=${menuid}" title="${alttext}">${title}</a></h4>
</div>
</article>
</li>
`);
});
}
В конце тег <img> равен
<img alt="some text" src="/$%7Bpreview%7D">
Я пытался:
- изменить имя переменной
- консоль регистрирует его до, после
append(), без проблем
typeof говорит, что это нормальная строка - это дает мне одинаковый результат в каждом браузере
Я действительно не понимаю, что я делаю неправильно, и только preview не работает, все остальные переменные в append() работают правильно.