Question

嘿伙计们，

我在过去的一天里一直在闯入墙上，这是一个课程项目，我只是为了玩google API而超出了要求。我的功能有效，如果你将一个字符串传递给searchTube（'bob'），如果找到第一个视频并弹出一个youtube窗口。我的目标是当你点击封面艺术时发生这种情况，现在我遇到的问题是我要传递歌曲的标题和艺术家的名字。但是，我得到一个随机的“在我回来？现在我相信这是由于空格，因为当我只是使用标题并选择一个具有空格相同结果的标题时......任何想法如何我可以解决这个问题吗？

//Do Not Modify the getMusic function
function getMusic() {
    var artist = document.getElementById('artist').value;
    itunes.getMusicByArtist(artist).then(drawSongs);
}







function drawSongs(songList) {
    console.log(songList);

    var container = $('#music-container')
    container.html('')
    songList.forEach(function (song) {

let myItem = song.title
console.log(myItem)


        var card = `
<div class='col-md-6'>
    <p class='h4 text-center' href='${song.url}'>${song.title}</p>
    <p class='h5 text-center' href='${song.url}'>${song.artist}</p>
            <img onclick=searchTube(${song.title} ${song.artist})  class='center-block' src='${song.albumArt}'>
            <div>
            <audio controls class='center-block'>
                <source  src="${song.preview}" type="audio/mpeg"> 
                Your browser does not support the audio element.
            </audio>
            </div>
</div>
    `

        container.append(card)
        myInfo = ''
    })
}

Youtube searchTube功能

function tplawesome(e, t) { res = e; for (var n = 0; n < t.length; n++) { res = res.replace(/\{\{(.*?)\}\}/g, function (e, r) { return t[n][r] }) } return res }


function searchTube(item) {

    // get fourm input
    q = item //$('#query').val()

    //run request on api
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet',
            type: 'video',
            q: q,
            maxResults: 1,
            order: 'viewCount',
            key: 'AIzaSyD9YPjBHHTiMX_MpqKySSwIIGlxL1zuD9o'
        },
        function (data) {
            console.log(data.items);
            $.each(data.items, function (index, item) {
                $.get('item.html', function (data) {
                    $('#results').append(tplawesome(data, [{ 'title': item.snippet.title, 'videoid': item.id.videoId }]))
                })
                //$('#results').append(item.id.videoId + ' ' + item.snippet.title + '<br>')
            })
            //$('results').append(item.id.videoId + ' ' + data.snippet.title + '<br>');


            $('#my_popup').popup({
                opacity: 0.3,
                transition: 'all 0.3s'
            });


        }
    );
}


//searchTube(test);

Answer 1

您未正确转义代码的searchTube(${song.title} ${song.artist})部分。由于您要传递字符串作为方法参数，因此应将此参数表示为字符串。通过将参数括在''。

中来完成此操作

你最终会得到：

<img onclick="searchTube('${song.title} ${song.artist}')"  class='center-block' src='${song.albumArt}'>

Answer 2

我认为，因为您从HTML中删除了引号，浏览器会尝试将它们添加到合理的位置。（当它到达空间时，它并不知道你实际上意味着更多的东西成为该属性值的一部分。）

而不是：

<img onclick=searchTube(${song.title} ${song.artist})

试试这个：

<img onclick="searchTube('${song.title} ${song.artist}')"

Jquery选择器在我的函数调用中返回一个随机的

2 个答案: