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

I am struggling with making the link change two attributes in the page:

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

a) I got a select box that changes the value of a YouTube video and loads it.

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) I realized that in the moment of change I need to change the content of div bellow the video div.

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

c) Is there a way to make one link (not a select box anymore) change the attributes of div and video?

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

1 个解决方案

#1

Say you have:

说你有:

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

You can use JQuery to detect a click on a video link and use its data attribute to pull through the desired video id:

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

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

Then this would be your video load function:

那么这将是你的视频加载功能:

function loadVideo(videoID) {

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

As I am not sure where your extra div content is coming from or how this would look in your HTML, it is hard to advise you how to implement this.

由于我不确定您的额外div内容来自哪里或者HTML中的内容如何,因此很难建议您如何实现这一点。

For example if the content was in the page already you could simply show and hide the correct div or block of information inside the div. Or if you wanted you could use an AJAX call to grab the content you needed and inject it into the div, replacing current content if some already in there.

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

For purpose of this example I have created a JSFiddle and added in a simple div with an extra description data attribute and added a changeDescription function in this EXAMPLE

出于这个例子的目的,我创建了一个JSFiddle并添加了一个带有额外描述数据属性的简单div,并在此示例中添加了一个changeDescription函数。

#1