Jquery 和 JS 在 DOM 上工作，而不是在 load
Jquery and JS works onDOM not onLoad
首先，让我说我对javascript，尤其是JQuery没有太多了解。
我在页面上加载一些javascript和Jquery时遇到了一些问题。
1）我在JS小提琴 http://jsfiddle.net/Gilera/mT9pV/1/上创建了一些代码，有一些用于时区转换器的javascript和用于滑动隐藏/显示div的JQuery函数。
当使用jsfiddle onDomready时，代码运行良好，并显示隐藏div工作的时间和滑动。但是当使用 onLoad 时，隐藏的div 有效，但时区转换器无效。知道在 js fiddle 上使用加载模式时如何让两者运行吗？
2）此外，如果我在浏览器中编译代码并测试网站，我会得到与《纽约时报》加载相反的结果，但在单击它们时不会加载隐藏的div。然后我怎样才能更改 chan2.js 脚本以作为 onDomready 运行，或者我需要在上面添加一个脚本来查找 Jquery Libary？
对于带有te代码的冗长帖子，我深表歉意，但这对我来说是全新的，任何帮助将不胜感激。
下面是我使用的代码
.HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">Team A vs Team B</li></ul></div><div class="place"><ul class="venue"><li class="field">Field A</li></ul></div></div>
<div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">player A vs Player B</li></ul></div><div class="place"><ul class="venue"><li class="field">Court 3</li></ul></div></div>
<div id='out'></div>
<script type='text/javascript' src='times2.js'></script>
<script type='text/javascript' src='chans2.js'></script>
<body>
</body>
</html>
CSS 样式2.css
@charset "utf-8";
.event {
width: 600px;
height: 38px
}
.place{
display: none;
width: 590px;
height: 38px;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #EB1D2D;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul.guides {
width: 570px;
height: 34px;
list-style: none;
display: block;
background-color: #D1E5FD;
border-style: solid;
border-width: 1px;
border-radius: 2px;
border-color: black;
border-spacing: 5px;
padding-top:1px;
border-radius:5px
}
ul.guides a, ul.guides a:visted, ul.guides a:link {
display: block;
text-decoration: none;
background-color: #8090AB;
color: black;
}
ul.guides a:hover, ul.guides a:active, ul.guides a:focus {
background-color: #FFFFFF;
}
li.icon {
display: inline-block;
width: 24px;
height: 24px;
padding-left: 10px;
}
img.icon{
display:inline-block;
padding-top:3px;
}
li.time{
display:inline-block;
text-align:center;
font-size: 12px;
width: 70px;
padding-left: 5px;
color: #0000FF;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
li.game{
display: inline-block;
text-align:center;
font-size: 12px;
padding-left: 10px;
background-color: #D1E5FD;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
ul.guides a, ul.nav a:visted{
display: block;
text-decoration: none;
background-color: #8090AB;
color: #000;
}
ul.guides a:hover, ul.guides a:active, ul.guides a:focus{
background-color: #6F7D94;
color: #000;
}
ul.venue {
width: 550px;
height: 34px;
list-style: none;
display: block;
background-color: #D1E5FD;
border-style: solid;
border-width: 1px;
border-radius: 2px;
border-color: black;
border-spacing: 5px;
padding-top:1px;
border-radius:5px
}
li.field{
width: 150px;
display: inline-block;
text-align:center;
font-size: 12px;
padding-left: 10px;
background-color: #D1E5FD;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
Javascript时代.js
window.onload = init;
function init(){
DisplayTimes();
}
function DisplayTimes(){
//legal formats: 1/10-13:00 for date and time
// : 13:00 for time - presumes utc date is same as local date
var dd = new Date();
var list = document.getElementsByTagName('span');
var mon, date, hr, min;
for (var i=0 ; i<list.length ; i++){
if (list[i].hasAttribute('data-utc')){
var str = list[i].getAttribute('data-utc');
if(str.indexOf('/') < 0){
mon = dd.getMonth()+1;
date = dd.getDate();
hr = str.substring(0,str.indexOf(':'));
}else{
mon = str.substring(0,str.indexOf('/'));
date = str.substring(str.indexOf('/')+1,str.indexOf('-'));
hr = str.substring(str.indexOf('-')+1,str.indexOf(':'));
}
min = str.substring(str.indexOf(':')+1);
dd.setUTCDate(mon);//date of month
dd.setUTCHours(hr); //24hour hour
dd.setUTCMinutes(min); //minutes
dd.setUTCSeconds(0); //seconds
var h = leadzero( dd.getHours() );
var m = leadzero( dd.getMinutes() );
var s = leadzero( dd.getSeconds() );
list[i].innerHTML += ' '+ h +':'+ m;
}
}
}
function leadzero(n){
var str1 = n.toString();
if(str1.length < 2){
str1 = '0'+ str1;
}
return str1;
}
Jquery chans2.js
$(".event").click(function(){
//hide all rrshow
$(".place").hide();
//show only required rrshow
$(this).parent().find(".place").show();
});
谢谢
编辑：抱歉发布了错误的代码，已将chan2.js更改为im使用的
在times.js 中，
而不是代码
window.onload = init;
function init(){
DisplayTimes();
}
用
$(function(){
DisplayTimes();
}
你的css有问题，你的html body元素被放置在
标签之外，我将所有内容都更改为在传递给$（document）.ready（）的单个函数中加载。 以下内容在我的浏览器中有效：.HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>onLoad</title>
<link href="style2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="schedule">
<div class="event">
<ul class="guides">
<li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li>
<li class="time"><span data-utc="9:05"></span></li>
<li class="game">Team A vs Team B</li>
</ul>
</div>
<div class="place">
<ul class="venue">
<li class="field">Field A</li>
</ul>
</div>
</div>
<div class="schedule">
<div class="event">
<ul class="guides">
<li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li>
<li class="time"><span data-utc="9:05"></span></li>
<li class="game">player A vs Player B</li>
</ul>
</div>
<div class="place">
<ul class="venue">
<li class="field">Court 3</li>
</ul>
</div>
</div>
<div id='out'></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type='text/javascript' src='onLoad.js'></script>
</body>
</html>
JavaScript：
$(document).ready(function () {
$(".event").click(function () {
//hide all rrshow
$(".place").hide();
//show only required rrshow
$(this).parent().find(".place").show();
});
function DisplayTimes() {
//legal formats: 1/10-13:00 for date and time
// : 13:00 for time - presumes utc date is same as local date
var dd = new Date();
var list = document.getElementsByTagName('span');
var mon, date, hr, min;
for (var i = 0; i < list.length; i++) {
if (list[i].hasAttribute('data-utc')) {
var str = list[i].getAttribute('data-utc');
if (str.indexOf('/') < 0) {
mon = dd.getMonth() + 1;
date = dd.getDate();
hr = str.substring(0, str.indexOf(':'));
} else {
mon = str.substring(0, str.indexOf('/'));
date = str.substring(str.indexOf('/') + 1, str.indexOf('-'));
hr = str.substring(str.indexOf('-') + 1, str.indexOf(':'));
}
min = str.substring(str.indexOf(':') + 1);
dd.setUTCDate(mon); //date of month
dd.setUTCHours(hr); //24hour hour
dd.setUTCMinutes(+min); //minutes
dd.setUTCSeconds(0); //seconds
var h = leadzero(dd.getHours());
var m = leadzero(dd.getMinutes());
var s = leadzero(dd.getSeconds());
list[i].innerHTML += ' ' + h + ':' + m;
}
}
}
function leadzero(n) {
var str1 = n.toString();
if (str1.length < 2) {
str1 = '0' + str1;
}
return str1;
}
DisplayTimes();
});
.CSS：
@charset "utf-8";
.event {
width: 600px;
height: 38px
}
.place{
display: none;
width: 590px;
height: 38px;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #EB1D2D;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul.guides {
width: 570px;
height: 34px;
list-style: none;
display: block;
background-color: #D1E5FD;
border-style: solid;
border-width: 1px;
border-color: black;
border-spacing: 5px;
padding-top:1px;
border-radius:5px
}
ul.guides a, ul.guides a:visited, ul.guides a:link {
display: block;
text-decoration: none;
background-color: #8090AB;
color: black;
}
ul.guides a:hover, ul.guides a:active, ul.guides a:focus {
background-color: #FFFFFF;
}
li.icon {
display: inline-block;
width: 24px;
height: 24px;
padding-left: 10px;
}
img.icon{
display:inline-block;
padding-top:3px;
}
li.time{
display:inline-block;
text-align:center;
font-size: 12px;
width: 70px;
padding-left: 5px;
color: #0000FF;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
li.game{
display: inline-block;
text-align:center;
font-size: 12px;
padding-left: 10px;
background-color: #D1E5FD;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
ul.guides a, ul.nav a:visited{
display: block;
text-decoration: none;
background-color: #8090AB;
color: #000;
}
ul.guides a:hover, ul.guides a:active, ul.guides a:focus{
background-color: #6F7D94;
color: #000;
}
ul.venue {
width: 550px;
height: 34px;
list-style: none;
display: block;
background-color: #D1E5FD;
border-style: solid;
border-width: 1px;
border-color: black;
border-spacing: 5px;
padding-top:1px;
border-radius:5px
}
li.field{
width: 150px;
display: inline-block;
text-align:center;
font-size: 12px;
padding-left: 10px;
background-color: #D1E5FD;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
小提琴
相关文章：
- 在Debian中运行包含load(）和print(）函数的JS脚本
- $(window）.load在带有异步js-libs的IE中触发得太快
- jQuery.load(）是另一个包含prism.js的页面
- Three.js issue creating meshes outside of loader's load(
- Stage.load(json) Issue..Kinetic.js
- jquery .load(） 不加载外部 JS
- Three.js透明对象和颜色更改(load.obj+.mtl）
- 在javascript(three.js）中使用函数:.load(）后，如何防止对象被破坏
- 如何在 JS 中使用 .load 时显示“加载”动画
- countUp.js doesnt load
- 以“$( window ）.load(function(）”开头的 js 代码
- jQuery 移动 css 和 js 不适用于使用 .load(） 加载的内容
- Jquery 和 JS 在 DOM 上工作，而不是在 load
- 如何使用 js 在 load(） 过程中显示加载图像
- Cocos2d 2.1.4 js HTML5 load text/string/json
- 如何使用cy.load设置细胞景观中节点的起始位置.js
- 使用 setInterval 和 jQuery load 在 JS 数组中加载 PHP
- Lab.js 和 jQuery with $(window）.load(function(） 过早触发
- JS不起作用，即使在使用window.load之后也是如此
- 我可以使用" Load .js"加载CSS吗?图书馆
