Question

编辑： 我想出了更好的解决方案。在while循环期间，我将id作为参数传递给 onclick 函数。但是，现在当我点击任何 DIV 时，没有任何反应。你能说出问题出在哪里吗？谢谢你的帮助。

我遇到了一个问题。我正在尝试实现预告片。用户可以观看它们的方式是单击一个应该使用javascript / jQuery作为按钮的div。问题是我只想要一个嵌入式游戏，所以我不需要多次回收代码。但我无法弄清楚如何让玩家为点击按钮的电影播放预告片。下面是代码，下面是我的请求摘要。谢谢阅读。

//Trailer links that got generated with a loop..
//EDIT: DIVs now contain the id as an attribute to a onClick function
<div class="trailer" onclick="playTrailer(M7lc1UVf-VE)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(ksfj34ln-Xe)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(rasdasdl-Xe)">
    <p>WATCH TRAILER</p>
</div>

//EDIT: added hidden DIV that should be displayed when the DIVs are clicked
<div id="trailer-box" style="display: none;">

    //EDIT: the play is now within the hidden DIV
    <div id="ytplayer"></div>

</div>

<script>
  function showMovie(id){
      $('.trailer-box').toggle(); //EDIT: newly added

      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          videoId: id
        });
      }
  }
</script>

我想知道一旦点击它并将其传递给脚本的DIV字段，我是否有办法检索videoId的值。如果你们中的任何人知道如何做到这一点，即使这意味着更多调整，请告诉我。非常感谢你阅读和回复。

Answer 1

应该像

$('.watch').click (function (){
    player.loadVideoById($(this).attr ('id'));
});

example

more info

Answer 2

看起来你没有使用jQuery，所以：

您应该使用数据属性：

<div data-id="M7lc1UVf-VE" class="watch">
    <p>WATCH TRAILER for movie A</p>
</div>

然后：

var nodeList = document.querySelectorAll('.watch');

for (var i = 0; i < nodeList.length; i++) {
    nodeList[i].addEventListener('click', 
                    function(e){
                      showMovie(e.target.parentElement.getAttribute("data-id"));
                    }, 
                    false);
}

function showMovie(id){
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: id
    });
  }
}

如何将特定ID传递给嵌入式YouTube播放器？

2 个答案: