如何从HTML文件中的li标签调用get属性
[英]How to call get attribute from a li tag in html file
问题描述
I want to do is similar to this . 
我想做的就是与此类似。
When I click on the "Movie A", I hope the function $('#playlist li').click(function(){...}) will be called, but it seems that nothing happens. 当我单击“电影A”时，希望函数$('#playlist li').click(function(){...})被调用，但似乎什么也没发生。 What is the problem? 问题是什么？
index.html: index.html：
<!DOCTYPE html>
<html>
<head>
<title>Home Video Player</title>
</head>
<body>
<video id="video" width="640" height="320" controls="controls">
Your browser does not support the video tag.
</video>
<ul id="playlist">
<li movieurl="a,mp4" movietype="video/mp4">Movie A</li>
<li movieurl="b.mp4" movietype="video/mp4">Movie B</li>
<li movieurl="c.mp4" movietype="video/mp4">Movie C</li>
<li movieurl="d.mp4" movietype="video/mp4">Movie D</li>
</ul>
<script src="main.js"> </script>
</body>
</html>
main.js main.js
$(document).ready(function(){
$('#playlist li').click(function(){
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', $(this).attr("movieurl"));
source.setAttribute('type', $(this).attr("movietype"));
video.appendChild(source);
});
});
4 个解决方案
解决方案1
4 已采纳 2015-05-19 12:45:35
如果要使用Jquery，则需要将其链接，这是CDN链接。
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
解决方案2
2 2015-05-19 12:46:19
将此添加到您的html <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
解决方案3
2 2015-05-19 12:49:27
You haven't referenced JQuery. 您尚未引用JQuery。
You will most liekly see in a console (Firebug for example) "$ is not defined".. meaning the JQuery "$" object hasn't been created. 您会在控制台（例如Firebug）中最无情地看到“未定义$” ..表示尚未创建JQuery“ $”对象。
To fix this, include a reference to JQuery (either locally or on a CDN) 要解决此问题，请包含对JQuery的引用（本地或CDN上）
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
or 要么
<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
should do what you need it to. 应该做你需要的。
Remember that JQuery must be defined BEFORE your script: 请记住，必须在脚本之前定义JQuery：
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="main.js"> </script>
You can get a correct version of JQuery to use from https://code.jquery.com/jquery/ 您可以从https://code.jquery.com/jquery/获取正确的JQuery版本以使用。
Also, as others have noted: 另外，正如其他人指出的那样：
- movie,a should probably be movie.a in your bullet list 电影，可能应该是电影。
- You can get elements by using $('#elementid') instead of using getElementById in JQuery - much shorter to type! 您可以通过使用$（'＃elementid'）而不是在JQuery中使用getElementById来获取元素-输入起来要短得多！
解决方案4
1 2015-05-19 12:48:34
Put the following code in between your <head> tags: 将以下代码放在您的<head>标记之间：
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="main.js"></script>
In order to use jQuery and javascript files, you need to tell your html document that there are JS files that the page's behavior can be interpreted from. 为了使用jQuery和javascript文件，您需要告诉html文档，存在可以从中解释页面行为的JS文件。
Also, since you are using jQuery, you can replace 另外，由于您使用的是jQuery，因此您可以替换
document.getElementById('video');
with 与
$('#video');
EDIT: I stand corrected, the best practice for scripts is to add them to the end of your body. 编辑：我已纠正，脚本的最佳实践是将其添加到您的身体末端。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.