从 PHP 获取 Javascript 中的 .src while

Question

我有一个包含几张图片的文件夹。我使用 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。也许有人可以帮助我。

Answer 1

替换此行

document.getElementById('bigImg')src = img[i].src;

和

document.getElementById('bigImg').src = img[i].src;

你忘了。在 src

之前

并为点击事件尝试这个

document.getElementsByTagName('img').addEventListener("click", function() {}

似乎您的所有图片都有相同的 ID，因此它不会应用于所有图片，ID 必须是唯一的您也可以在 jquery 中执行此操作以单击

$('.imgClass').click(function(){

});

Answer 2

首先给所有图片起一个相同的class名称（例如class名称是test）然后

写下代码

$('.test').on('click',function(){

   var src = $(this).attr('src');

   // here place your rest of the code


});

Answer 3

ID 在 HTML4 和 HTML5 中都应该是唯一的。

http://www.w3.org/TR/html4/struct/global.html

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

http://www.w3.org/TR/html5/dom.html#the-id-attribute

The id attribute specifies its element's unique identifier (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>

同时格式化您的代码并使用一些具有自动完成和调试器的代码编辑器。你有很多小错误（例如 <tr> 而不是 php echo 中的 <td>，你忘记了 JS 中 src 之前的点（.），没有 t 在 getElementsByClassName).

从 PHP 获取 Javascript 中的 .src while

Get .src in Javascript from PHP while

html

javascript

php

addeventlistener

while-loop