所以…经过一些工作,很多很多很多,嗯,
太多了
经过反复试验和大量参考jQuery文档以及其他问题,为了了解这里发生了什么,我拼凑了一种特别肮脏的访问兄弟姐妹的方法
.placeholder
部门。
$(document).ready(function(){
// ...Other code to insert the YouTube...
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</dd>
</dl>
</div>
我曾希望这会以某种方式将页面重置为其起始位置,以便我可以单击
.png
要放大图像,然后替换为视频,请单击
.close
.png
将其放大并再次插入YouTube视频。
我不知道为什么这看起来是个好主意,但确实如此。遗憾的是,它不起作用,我也不知道为什么。我有…一个
预感
这可能与jQuery有关
live
事件/功能/事物(我是
不熟悉jQuery),但我还不知道如何将所有内容连接在一起。
为了完整起见,由于这是对前面问题的发展,我将从
html
下面的文件,所以任何进来的人都可以看到我做了什么,如果不能更好地理解我的决策过程,希望能知道为什么。
整个代码:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>in the absence of light | ITAOL</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function () {
var videoID = $(this).attr("id");
$(this).animate({
width: "445px",
height: "364px"
}, 600, function() {
$(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>");
});
});
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="branding" title="In the Absence of Light.">
<h1 title="In the Absence of Light">In The Absence of Light</h1>
<div id="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">dates</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder">
<img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
</div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<div class="placeholder">
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</div>
<div class="close">x</div>
</dd>
</dl>
</div>
<div id="foot">
</div>
</div>
</body>
</html>
