从PHP中获取Javascript中的.src

Get .src in Javascript from PHP while

本文关键字：中的 src Javascript 获取 PHP      更新时间：2023-09-26

我有一个文件夹，里面有几个图像。我正在使用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

});
相关文章：