javascript实现容易的图片库 功能 分离js与html是出现情况
javascript实现简单的图片库 功能 分离js与html是出现情况
调用不了prepareGallery 是啥情况？？
----------------------------------html---------------------------------------------
本帖最后由 z429083705 于 2014-10-14 11:08:26 编辑
function addLoadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload != "function"){
window.onload = func;
} else {
window.onload = function ( ) {
oldonload ( );
func;
}
}
}
function insertAfter (newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement , targetElement.nextSibling);
}
}
function preparePlaceholder ( ) {
if (!document.createElement) {
return false;
}
if (!document.createTextNode) {
return false;
}
if (!document.getElementById) {
return false;
}
if (!document.getElementById("imgGallery")) {
return false;
}
var placeholder = document.createElement ("img") ;
placeholder.setAttribute ("id","placeholder");
placeholder.setAttribute ("src","5.jpg");
placeholder.setAttribute ("alt","my image gallery");
var description = document.createElement ("p");
description.setAttribute ("id","description");
var desctext = document.createTextNode ("Choose an image!");
description.appendChild (desctext);
//document.getElementsByTagName("body")[0].appendChild(description);
//document.getElementsByTagName("body")[0].appendChild(placeholder);
var gallery = document.getElementById("imgGallery");
insertAfter (placeholder,gallery);
insertAfter (description,gallery);
}
function prepareGallery ( ) {
//1.检查是否理解getElementsByTagName
if (!document.getElementsByTagName) {
return false;
}
//2.是否理解getElementById
if (!document.getElementById) {
return false;
}
//3.html中是否有ID ： imgGallery 的元素
//其实1.2.不成立 3.也就不需再测 为预防测试
if (!document.getElementById("imgGallery")) {
return false;
}
//以上不符合 结构化设计中 一入口一出口 但是感觉十分清晰
var gallery = document.getElementById("imgGallery");
//定义ul中所有连接
var links = gallery.document.getElementsByTagName("a");
//遍历
for ( var i=0; i < links.length; i ++) {
//links[i]元素的onclick事件处理 制定为一个匿名函数
links[i].onclick = function ( ) {
//return !showPic (this);
//return false;
if (showPic(this)) {
return false;
} else {
return true;
}
}
/*links[i].onclick = function ( ) {
return showPic(this) ? false : true;
}
使用三元运算符
*/
//links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic) {
//判断test2.html中是否有 placeholder
if (!document.getElementById("placeholder")) {
return false;
}
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//var placeholder = document.getElementById("placeholder");
//placeholder.setAttribute("src",source);
//var text = whichpic.getAttribute("title");
//alert($("description").nodeValue);
//alert($("description").firstChild.nodeValue);
//alert($("description").childNodes[0].nodeValue);
//$("description").firstChild.nodeValue = text;
return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
调用不了prepareGallery 是啥情况？？
----------------------------------html---------------------------------------------
<html>
<head>
<title>图片库</title>
</head>
<!--<link rel="stylesheet" href="test2.css" type="text/css" />-->
<body>
<h1>Snapshots</h1>
<!--与书上不符 没有title属性 略-->
<!--列表ID 分离DOM事件-->
<ul id="imgGallery">
<li>
<a href="D:\Download\图片\头像\1.jpg" >图1</a>
</li>
<li>
<a href="D:\Download\图片\头像\2.jpg" >图2</a>
</li>
<li>
<a href="D:\Download\图片\头像\3.jpg" >图3</a>
</li>
<li>
<a href="D:\Download\图片\头像\4.jpg" >图4</a>