上一篇文章已经将JS代码和HTML文档分的很开了,负责实际完成各项任务的JS函数已存入了外部文档,唯一没有分开的便是在HTML中使用onlick属性,这样的做法效率低而且还很容易引发问题。
具体的优化代码如下
//jsgrammar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">
</head>
<body>
<!-- 功能:点击链接,使链接图片出现在页面下方。成为简单的图片库浏览页面 -->
<h1>Snapshots</h1>
<ul id="imageGallery">
<li>
<a href="Image/rose.jpg" title="rose Image">rose Image</a></li>
<li>
<a href="Image/bird.jpg" title="bird Image">bird Image</a>
</li>
<li><a href="Image/shanghai.jpg" title="shanghai Image">shanghai Image</a>
</li>
<li><a href="Image/beautifulrose.jpg" title="beautifulrose Image">beautifulrose Image</a>
</li>
<img id="placeholder" src="Image/gallery.jpg">
<p id="description">Choose an image</p>
</ul>
</body>
<script type="text/javascript" src="scripts/showPic.js"></script>
</html>
//showPic.js
addLoadEvent(prepareGallery);
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof oldonload!='function'){
window.onload=func;
}else{
window.onload=function(){
func();
}
}
}
function prepareGallery(){
var gallery=document.getElementById("imageGallery");
var tagArray=gallery.getElementsByTagName("a");
/*
var tagArray=document.getElementsByTagName("a");
这句代码的作用和上面两句代码的结果是一样的,都是
获取a标签数组,前两句代码是通过a标签外的ul的id获取ul下
a标签数组,注释中的代码是直接从html获取a标签数组,这样做的
目的是,当html中有多个a标签时,可以通过对应的id准确的获取对应
的a标签数组。
*/
for (var i = 0; i < tagArray.length; i++) {
tagArray[i].onclick=function(){
showPic(this);
return false;
}
}
}
function showPic(whichPic){
var num1=whichPic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",num1);
var titleNume2=whichPic.getAttribute("title");
var description=document.getElementById("description");
/*
注:将titleNume2的值赋值给descriptionText
将titleNume2直接赋值给description.innerText
是不一样的
*/
//var descriptionText=description.innerText;
//descriptionText=titleNume2;
// 下面这两种方式都可以实现P标签里的内容替换
//description.innerText=titleNume2;
description.firstChild.nodeValue=titleNume2;
}
//layout.css
body{
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #008000;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
display: block;
clear: both
}