2013-04-25 70 views
-5

比方说,我有一个名为“videoplayer”的DIV--在这个DIV里面是一个图像。单击链接时用Javascript更改HTML?

当单击链接时,是否有简单的方法来更改此DIV中的HTML代码?

例如,这是当前DIV:

<div class = "big_player" id="player1"> 
      <img src="whatever.jpg"> 
    </div> 

当用户点击一个链接,我想要的HTML更改为:

<div class = "big_player" id="player1"> 
      <script> 
       playVideo(file, stream, key); 
      </script> 
    </div> 

我有多个缩略图/链接(12总共)与所有不同的'文件,流,关键'变量。请参考here以供参考。

完成此操作的最简单最简单的方法是什么?

+0

它可以用jQuery轻松完成,但文件,流,密钥从哪里来? – j08691 2013-04-25 21:51:26

+4

欢迎来到[SO];阅读[faq]。当您现有的问题没有获得足够的流量时,正确的解决方案是将其编辑为更好的问题。简单地重新发布相同的问题是不可接受的。 – zzzzBov 2013-04-25 21:54:31

回答

0

是的,这很简单。

var div = document.getElementById("player1"); 
div.onmousedown = function() { 
    div.innerHTML = "stuff!" 
}; 

的jsfiddle:(点击测试)http://jsfiddle.net/yjdfg/

0

可以使这样的功能:

function changeDiv(divID) { 
    var div_to_change = document.getElementById(divID); 
    div_to_change.innerHTML = 'whatever you want here'; 
} 

<a onClick="changeDiv('player1')" href="#">Click to change div</a> 
0

叫我相信你想运行点击脚本:

$('#player1').click(function(){playVideo(file, stream, key);}); 

这对他们中的一个(player1)有效,你需要为剩下的工作。请注意,例如,您还必须定义您的函数参数(文件,流,键)或从div属性中获取它们。 如果它们是动态的,则使用on而不是click

但是,如果你真的想改变div的内容(无论是什么原因),这是把点击功能中的代码:

var html_code = "<script>playVideo(file, stream, key);</script>"; 
$('#player1').html(html_code); 

编辑

参观后您的网站,我注意到你没有点击大分区来改变它的内容,而是其他的。在这种情况下,正确的选择器是#miniplayer1,#miniplayer2等,以便原始代码变为$('#miniplayer1').click(function(){playVideo(file, stream, key);});