Question

我正在努力让链接更改页面中的两个属性：

a）我有一个选择框可以更改YouTube视频的价值并加载它。

function loadVideo() {
  var selectBox = document.getElementById("videoSelection");
  var videoID = selectBox.options[selectBox.selectedIndex].value

  if(ytplayer) {
    ytplayer.loadVideoById(videoID);
  }
}

            <select id="videoSelection" onchange="loadVideo();">
              <option value="ylLzyHk54Z0" selected>YouTube API Overview</option>
              <option value="muLIPWjks_M">Ninja Cat</option>
              <option value="GMUlhuTkM3w">Beatboxing Flute</option>
            </select>

b）我意识到在变化的那一刻我需要改变视频div的div内容。

c）有没有办法让一个链接（不再是选择框）改变div和视频的属性？

Answer 1

说你有：

<a href="#" class="videoLink" data-video="ylLzyHk54Z0">YouTube API Overview</a>

您可以使用JQuery检测视频链接上的点击，并使用其数据属性来浏览所需的视频ID：

$(".videoLink").on("click", function () {
    var videoId = $(this).data('video');
    loadVideo(videoId);
    //Also load in the content you need into the div here
});

然后这将是您的视频加载功能：

function loadVideo(videoID) {

  if(ytplayer) {
    ytplayer.loadVideoById(videoID);
  }
}

由于我不确定您的额外div内容来自何处以及HTML中的内容如何，因此很难建议您如何实现这一点。

例如，如果内容已经在页面中，您可以在div中显示和隐藏正确的div或信息块。或者，如果你想要你可以使用AJAX调用来获取你需要的内容并将其注入div中，如果已有的内容已经替换当前内容。

为了这个例子的目的，我创建了一个JSFiddle并添加了一个带有额外描述数据属性的简单div，并在这个EXAMPLE中添加了一个changeDescription函数

一个链接（onclick）更改了两个属性

1 个答案: