Question

我正在使用jQuery在网页上构建多个轮播，方法是使用Youtube Data API v3从YouTube调用我需要的所有信息。完成设计和功能后，我正在努力解决一件我无法理解的简单事情。

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

然后使用each() resultLoop 将所有HTML内的信息添加到网页的某个位置（我剥离了所有原始属性以保持可读性）。

function resultsLoop(data, menuid) {
    jQuery.each(data.items, function () {

        var alttext = this.snippet.title;
        var title = alttext.substring(0, 57) + '&hellip;'
        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()中的所有其他变量都正常工作。

Answer 1

为什么不像使用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>');

，然后删除附加字符串中的所有空格。我希望这是寻找的东西。

Answer 2

让您知道，以上所有内容均在Joomla页面上进行。

除List<WebElement> availableDateElems= driver.findElements(By.xpath("//table[@class='ui-datepicker-calendar']//td[@data-handler='selectDay]"));以外，将所有代码都放在.js文件中即可解决所有问题。

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

一般的javascript代码的一般解决方法。感谢罗里的评论，这给了我一些见识。

带有后引号（``）的jQuery append（）如何丢失/不会呈现字符串变量？

2 个答案: