将PHP数组发送到Javascript，然后从数组中选择随机图像

Question

这是我的PHP代码：

    <?php
        $all_images = glob("Images/Classes/{*.png, *.PNG}", GLOB_BRACE);
        echo json_encode($all_images);
        shuffle($all_images);
    ?>

我的Javascript代码：

function Images(){
var i;
var z = Math.floor($('.Images').height() / 105); //Var z is the amount of images which fit in my div called .Images        
var images = JSON.parse( '<?php echo json_encode($all_images); ?>' ); //Get Array from PHP which contains all images in the folder.
for (i = 0; i < z; i++) {
    var a = document.createElement('a');
    var noextension = images[i].substring(0, images[i].lastIndexOf("."));
    var name = noextension.substring(noextension.lastIndexOf("/") + 1);
    var final = "/Wiki/" + name + ".php";
    a.setAttribute("href", final);
    var x = document.createElement('img');
    x.setAttribute("src", images[i]);
    x.setAttribute("alt", name);
    x.setAttribute("title", name);
    a.appendChild(x);
    document.getElementsByClassName('Images')[0].appendChild(a);
    }
};

我终于制作了这个程序，所以它确实有效，感谢你们，但我仍然有问题。 问题是PHP代码在HTML代码中粘贴了一行。 但是PHP代码不应该写任何东西。 例如，如果我将PHP代码从div Images移动到另一个DIV，则该阵列将弹出另一个div。 那么为什么PHP代码在HTML代码中写一些东西呢？ 我该如何防止这种情况？ 错误

编辑：我通过添加document.getElementsByClassName（'Images'）[0] .innerHTML =“”修复它。 在javascript中。

Answer 1

尝试在之前将img包含在锚标记中。 像这样：

a.appendChild(x);

然后你的：

document.getElementsByClassName('Images')[0].appendChild(a);

如果我理解你正确，并且错误描述也是如此，那么它找不到具有所需结构的所需元素

Answer 2

正则表达式会让您的生活更轻松。 而不是使用“替换”，我会使用这样的东西来完全控制通过的字符串。 该模式可以增强 - 或更简单（ https://regex101.com/ ）。 我希望这会给你一个想法。 祝好运！

 var str = "http://www.blastr.com/sites/blastr/files/Yoda-Meditating.jpg" var pattern = /([-^\\w+ _:]+)(\\.(jpe?g|gif|png){1,4})$/gi; var image = pattern.exec(str); var fullName = image[0]; //Yoda-Meditating.jpg var name = image[1]; //Yoda-Meditating var fullExtension = image[2];//.jpg var extension = image[3];//jpg