Question

我是JavaScript的新手。我已经使用过Java和C＃（以及一些c ++）

到目前为止..

我正在使用JavaScript将目录中的图片加载到数组中。在此之后，我想将这些图片放在我的页面上。

这已经有效了。

下一步是添加全屏功能，以全屏分辨率加载图片。

var myfiles; 
var pfad = "./bilder/"    //directory of the images
var index = 0;

myfiles = new Array(); //String array with the names of the pictures
myfiles[0] = "01.png"; 
myfiles[1] = "01.png"; //usw. 
myfiles[2] = "03.png";
myfiles[3] = "02.png";


function fullScreen(bild) {
    document.write('<img src="'+ pfad + bild + '" border="0" width="100%">'); 
    alert (bild);
}

function start() {
    for(var i=0; i < myfiles.length; i++) { 
        pics[i].src = pfad + myfiles[i];
        string = myfiles[i];

        document.write('<img  onclick="fullScreen(string);" src="'+ pfad + myfiles[i] + '"     border="0" height="150px" >'); 
    } 
}

此代码仅加载我的数组的最后一张图片.. 函数fullScreen()似乎只接受字符串的最后一个值。

HTML部分

<script type="text/javascript">
    start();
</script>

Answer 1

只有在点击循环时才会评估string。

您需要直接传递它：

    for(var i=0; i < myfiles.length; i++) { 

    pics[i].src = pfad + myfiles[i];
    string = myfiles[i];

    document.write('<img  onclick="fullScreen(\''+string+'\');" src="'+ pfad + myfiles[i] + '"     border="0" height="150px" >'); 

    }

Answer 2

<强> SOLUTION

JS

var myfiles = []; 
var pfad = "http://placehold.it/350x250/&text=";
var index = 0;

myfiles[0] = "Image 0"; 
myfiles[1] = "Image 1";
myfiles[2] = "Image 2";
myfiles[3] = "Image 3";

function fullscreen(){
  if(this.className == 'fullscreen') this.className = '';
  else this.className = 'fullscreen';
}

function createImage(src){ 
  var img = document.createElement('img');
  img.src = pfad + src;
  img.addEventListener('click', fullscreen);
  document.body.appendChild(img);
  return img;
}

function start(){
  for(var i=0; i < myfiles.length; i++) { 
    var img = createImage(myfiles[i]);
  } 
}
start();

CSS

html, body, .fullscreen {
  height: 100%;
}

无法启动＆＃34; document.write（）;＆＃34;

2 个答案: