我有一个文件夹,里面有几个图像。我正在使用PHP
来获取每个图像的路径,以便在HTML <table>
中显示它们。现在我正在尝试使用addEventListener
在另一个div
中显示图像。我开始给你看我的PHP
:
<table id="imgTable">
<tr>
<?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
while($file = readdir($handle)) {
if($file !== '.' && $file !== '..') {
echo '<tr><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass"></td>';
}
}
?>
</tr>
</table>
之后,我想使用addEventListener
从点击的图像中获取URL,并使用src在另一个div
中显示图像。就像一个照相馆。这就是我在JS中所拥有的:
<script type="text/javascript">
document.getElementsByTagName('img').addEventListener("click", function(){
document.getElementById('imgViewer').style.visibility= "visible";
var img = document.getElemensByClassName('imgClass');
for(i=0; i<img.length; i++) {
document.getElementById('bigImg')src = img[i].src;
}
}
</script>
之后,我用CSS
隐藏的div
:来显示图像
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
我不想使用onClick
。但addEventListener
没有反应,我不明白为什么。这是我在大学的第一年,我刚刚开始写JavaScript。也许有人帮我。
ID在HTML4和HTML5中都应该是唯一的。
http://www.w3.org/TR/html4/struct/global.html
id=名称[CS]此属性为元素指定名称。此名称在文档中必须是唯一的。
http://www.w3.org/TR/html5/dom.html#the-id属性
id属性指定其元素的唯一标识符(id)。[DOM]
您可以按照以下修改您的PHP和JavaScript代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr><?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
$imgID = 0;
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo ' <td><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass" id="imageId_'.$imgID.'"></td>'n';
$imgID++;
}
}
?></tr>
</table>
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
代码经过测试并正在运行。。。
您可以运行以下演示片段(我替换图像并手动添加html代码,而不是php部分)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr>
<td><img src="http://i.imgur.com/99ACX4d.jpg" alt="image" class="imgClass" id="imageId_1"></td>
<td><img src="http://i.imgur.com/lXVuaa3.jpg" alt="image" class="imgClass" id="imageId_2"></td>
</tr>
</table>
<div id="imgViewer">
<img src="http://i.imgur.com/QsYVnSd.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
也可以格式化你的代码,并使用一些带有自动完成和调试器的代码编辑器。您有很多小错误(例如,php echo中的<tr>
而不是<td>
,JS中src之前忘记了句点(.),getElemen中没有tsByClassName)。
替换此行
document.getElementById('bigImg')src = img[i].src;
带有
document.getElementById('bigImg').src = img[i].src;
你忘了。berfore-src
并尝试点击事件
document.getElementsByTagName('img').addEventListener("click", function() {}
看起来你的所有图像都有相同的id,所以它不会应用于所有图像,id必须是唯一的你也可以在jquery中点击
$('.imgClass').click(function(){
});
首先为所有图像提供相同的类名(例如类名是test),然后
写下代码
$('.test').on('click',function(){
var src = $(this).attr('src');
// here place your rest of the code
});