Получить .src в Javascript от PHP, пока

У меня есть папка с несколькими изображениями. Я использую PHP, чтобы получить путь к каждому изображению, чтобы показать их в HTML <table>. Теперь я пытаюсь использовать addEventListener, чтобы показать изображение в другом div. Я начинаю, чтобы показать вам мой PHP:Получить .src в Javascript от 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 с выбранным изображением и использовать СРК, чтобы отобразить изображение в другом 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. Может быть, кто-то мне поможет.

источник

2015-12-02 Maximilian Fixl

Хорошо для начала атрибуты 'id' должны быть уникальными. Вторые атрибуты 'src' должны содержать URL-адрес, а не путь к файлу – Steve

@Steve Вы не правы в отношении пути к файлу – DanFromGermany

Почему я должен использовать URL-адрес вместо пути к файлу? Что-нибудь о безопасности? –

ID должен быть уникальным как для HTML4, так и для HTML5.

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

ID = имя [CS] Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

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

Атрибут 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++) { 
 
\t document.getElementById(imglist[i].id).addEventListener("click", function(){ 
 
\t \t document.getElementById('bigImg').src = this.src; 
 
\t }); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

формат также код и использовать некоторые редактор кода с автозаполнения и отладчик. У вас много мелких ошибок (например, <tr> вместо <td> в php echo, вы забыли точку (.) До src в JS, нет t in getElemen t sByClassName).

источник

2015-12-02 13:29:08 Nicolo

Спасибо! Я это исправил. Но реакция на клик по изображению еще не решена. Я подумаю. Огромное спасибо. –

@MaximilianFixl не работает, потому что прослушиватель событий не работает с getElementsByTagName и getElemensByClassName. Они генерируют массив элементов, и вы должны цитировать, чтобы добавить прослушиватель событий для каждого из них. Я изменяю свой ответ, тестирую его и добавляю рабочий демонстрационный фрагмент. Просто нажмите «Выполнить фрагмент кода» под вторым фрагментом для демонстрации. – Nicolo

Я попробую! Спасибо! И addEventListener только не работает с getElementsByTagName и getElementsByClassName? Работает ли он только с getElementById? Я благодарен за этот совет! –

заменить эту строку

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

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

Вы забыли. berfore ЦСИ

и попробовать это за событие щелчка

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

кажется, что ваши все изображения имеет тот же идентификатор, так что не будет применяться на всех изображениях, идентификатор должен быть уникальным вы также можете сделать это в JQuery для нажмите

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

});

источник

2015-12-02 13:14:57

Причина! уникальные идентификаторы. Хорошо, я изменил его. Но по-прежнему нет реакции, щелкнув по изображению. Даже imgViewer не будет видимым. –

первым дает такое же имя класса для всех изображений (пример имени класса является тестом), а затем

написать ниже кода

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

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

    // here place your rest of the code 


});

источник

2015-12-02 13:22:03

Получить .src в Javascript от PHP, пока

ответ

Смежные вопросы