Выделение в замыкании.
Добрый вечер.
Имеется примерно следующая структура: <label class="file-upload" for="upload-img"> <mark>Choose img...</mark> ... <input type="file" id="upload-img"> </label> ... <label class="file-upload" for="upload-img"> <mark>Choose img...</mark> ... <input type="file" id="upload-img"> </label> Необходимо по событию, что изменился инпут, присвоить его значение в его марк. Делал так (после прочтения вот этой темы http://javascript.ru/basic/closure)
function SetPath(sel, fm)
{
fm.innerHTML = sel.value;
}
function FileInput()
{
var label = document.пetElementsByClassName('file-upload');
for(var i = 0; i < label.length; i++)
{
var inp = label[i].getElementsByTagName('input')[0];
inp.onchange = function(x)
{
// console.log(x) выводит 0,1 при вызове функции FileInput()
return function()
{
// передать label как параметр не получилось
var label = document.getElementsByClassName('file-upload');
// console.log(x) выводит всегда 0 при изменении любого инпута
var mark = label[x].getElementsByTagName('mark');
SetPath(this, mark);
}
}(i)
}
}
Собственно вопрос - почему Х всегда 0? И как это можно реализовать? Второй вопрос,
inp.onchange = function(x) {}
Разве здесь функция не требует первым параметром event? Если да, то почему в статье на которую я привел ссылку все работает? Если нет, то опять же почему? Заранее спасибо. |
HaseProgram,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<label class="file-upload" for="upload-img">
<mark>Choose img...</mark>
...
<input type="file" id="upload-img">
</label>
...
<label class="file-upload" for="upload-img">
<mark>Choose img...</mark>
...
<input type="file" id="upload-img">
</label>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.file-upload'), function(label) {
var mark = label.querySelector('mark');
label.querySelector('input').addEventListener('change', function() {
mark.innerHTML = this.value;
});
});
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:39. |