Question

我有一个页面，其中许多var userInfo = new UserInfo {Password = "LetMeIn", Username = "rufusl"}; var thisExeDirectory = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location); var psExePath = Path.Combine(thisExeDirectory, "Tools", "psexec.exe"); var leMars21StArguments = "/C \"" + psExePath + @""" -i \\VML-2012-QBOOK2 -u mydomain\" + userInfo.Username + " -p " + userInfo.Password + @" -d C:\batch\myfile.bat"; Console.WriteLine(leMars21StArguments);指向不同的视频文件，一个anchors：

div

当用户点击链接时，我希望在<a href="http://www.example.com/example-1.mp4" class="video">1</a> <a href="http://www.example.com/example-2.mp4" class="video">2</a> <a href="http://www.example.com/example-3.mp4" class="video">3</a> <div id="video-player"> </div>内创建video元素，如下所示：

div

我需要<div id="video-player"> <video> <source src="[HREF-FROM-THE-A]"> </video> </div>元素上的controls和autoplay属性。

我是否需要在我的锚点添加一个类？我在想......因为我在页面上有其他不是视频的链接。更新了问题。

这对某人来说应该很容易，我对JS / jquery很糟糕。我试着搜索：“jquery create element onclick”，“jquery append element onclick”。

Answer 1

您可以听取<a>上的点击次数，并使用html方法注入所需的视频标记。可以使用jquery的href方法获取attr值，并将$(this)与点击的<a>结合使用：

$("a.video").click(function(event){
  event.preventDefault();
  $("#video-player").html("<video controls src=" + $(this).attr("href") + "></video>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.example.com/example-1.mp4">1</a>
<a href="http://www.example.com/example-2.mp4">2</a>
<a href="http://www.example.com/example-3.mp4">3</a>

<div id="video-player">

</div>

我还在生成的controls上添加了<video>，以便更清楚地创建它。

Answer 2

将锚标记替换为：

<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-1.mp4')">1</a>
<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-2.mp4')">2</a>
<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-3.mp4')">3</a>

然后添加一个javascript函数：

function addvideo(href)
{
    $('#video-player').html('<video controls autoplay><source src="'+href+'"></video>');
}

jQuery onclick使用属性和子元素创建和追加元素

2 个答案: