javascript - jQuery选择器在我的函数调用中返回随机“

https://github.com/rajien2/Itunes

大家好，

过去的一天，我已经陷入困境，这是一个课堂项目，我超出了使用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);

最佳答案

您没有正确转义代码的searchTube(${song.title} ${song.artist})部分。由于您希望将字符串作为方法参数传递，因此应将此参数作为字符串发出信号。为此，请将参数包含在''中。

您最终将得到：

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