將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