2016-09-24 39 views
0

https://github.com/rajien2/ItunesjQuery选择在我的函数调用

嗨返回随机“,

我一直在运行我的头到现在过去一天一堵墙,这是一类项目,我走到外面如果你发现第一个视频并弹出一个youtube窗口,那么我的函数可以工作,如果你传递一个字符串到searchTube('bob'),目标是当你点击封面艺术,现在我遇到的问题是我想传递歌曲的标题和艺术家的名字,但是我会随机获得“在我的回归中?现在我相信enter image description here这是由于空格,因为当我只使用标题,并选择一个标题,有空格相同的结果......任何想法如何我可以解决这个问题?

DevTools results

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

回答

1

你是不是正确逃避你的代码的searchTube(${song.title} ${song.artist})一部分。既然你想传递一个字符串作为方法参数,你应该把这个参数表示为一个字符串。通过将您的参数封入''来完成此操作。

您将结束:

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

呃哇!我怎么错过了!非常感谢你! – Mal229

1

我觉得是因为你离开了引号出你的HTML,浏览器尝试添加他们明智地。 (当它到达的空间,它不知道你实际上意味着更多的事情是属性值的一部分。)

取而代之的是:

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

试试这个:

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

呃哇!我怎么错过了!非常感谢你! – Mal229

相关问题