javascript - 一个链接(onclick)更改两个属性

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 内的信息 block 。或者，如果您愿意，可以使用 AJAX 调用来获取所需的内容并将其注入(inject)到 div 中，如果当前内容已存在，则替换当前内容。

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