Question

我对jQuery很新，而且我的网页设计一般都很生疏。我的网站上有一个页面，其中有12个按钮和一个iframe，它嵌入在显示视频的直播网站中。我想要的只是每个按钮从这个站点加载不同的视频到iframe而不是简单地重新加载整个页面。我搜索并看到了一些jQuery与iframe交互的例子，但对我来说太复杂了，无法完全遵循。有人可以提供一个我需要做的简单例子吗？我只需要jQuery来更改src值并在用户点击其中一个按钮时重新加载iframe。

这是我正在玩的代码

<div id="chanelShowEmbed" class="embed-responsive">
      <iframe id="chanelShow" class="embed-responsive-item" src="chanel1 url" onLoad='$("#popLoad").fadeOut("slow");' allowfullscreen>  </iframe>
    </div>
  <div class="col  m-auto"> <img id="channel1" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel2" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel3" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel4" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel5" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel6" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel7" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel8" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel9" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel10" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel11" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel12" class="chanel" src="image url"> </div>

JS代码

var listChanels = {
    "channel1":"channel url",

    "channe2":"channel url",

    "channe3":"channel url",
    "channe4":"channel url",
    "channe5":"channel url",
    "channe6":"channel url",
    "channe7":"channel url",
    "channe8":"channel url",
    "channe9":"channel url",
    "channel0":"channel url",
    "channel1":"channel url",
    "channel2":"channel url",

我在这里缺少什么？

非常感谢任何帮助。

感谢。

Answer 1

为每个按钮分配数据属性可能是有意义的，其中data-src是您在点击时要分配给iframe的源网址。

所以HTML看起来像这样......

<img class="channel" data-src="your Channel Source" src="image source"></img>

然后，当用户单击图像时，您可以指定一个jQuery侦听器，将数据属性中的源分配给iframe，如此...

$('.channel').click(function(){
  var s = $(this).data('src');
  $('#channelShow').attr('src', s);
});

请注意我在你的班级和id名称中添加了'n'，因为我想正确拼写频道：）

使用jQuery更改和加载iframe的'src'属性

1 个答案: