0

通过使用 Youtube Data API v3 从 YouTube 调用我需要的所有信息，我正在使用 jQuery 在网页上构建几个轮播。在完成设计和功能之后，我正在为一件我无法理解的简单事情而苦苦挣扎。

我使用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);
        });
    }
}

然后使用resultLoopeach()将所有信息放入一些 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()都在正常工作。

4

2 回答 2

0

为什么你不使用你已经为 jQuery("#carousel-" + menuid + "ul") 所做的 concat ！

示例：（请使用此代码进行附加和检查，我使用的是单引号而不是反引号，因为它不被 js 验证接受）

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

并从附加字符串中删除所有空格。我希望这是要找的。

于 2019-07-06T12:25:50.437 回答
-1

只是让您知道，以上所有内容都在 Joomla 页面上工作。

将除 .js之外的所有代码jQuery(document).ready(function(){...loadVids()...}放在一个 .js 文件中即可解决所有问题。

我认为有一些过滤器不会让您在页面中仅使用 javascript 注入外部资源，例如https://i.ytimg.com/vi/lmuUD9_eDnY/sddefault.jpg（这很聪明），但过滤器没有如果您在网站本身中包含 .js 文件，则不适用。

一个平庸的 JavaScript 代码的平庸解决方法。感谢 Rory 在评论中给了我一些见解。

于 2019-07-05T16:19:40.633 回答