javascript - 如何使用 Ajax 和 Jquery 显示带有某些图像的文本？

Question

我一直在尝试找到一种使用 jQuery 和 Ajax 显示某些文本文件的方法。

显示特定图像时应显示 txt 文件。例如，如果显示苹果的图片，我希望在其下方显示文字“Apple”，如果显示香蕉的图片，则我希望文字显示“Banana”等。

我正在使用一个数组来选择要显示的随机图片，但我不知道如何在其下面显示文本。

这是我的图像显示代码:

function displayPic() {    
    var imagesArray1 = new Array();

    imagesArray1 = [
        "img/Banana.jpeg", "img/Banana1.jpg", "img/Banana2.jpg",
        "img/Apple.jpg","img/Apple1.jpg", "img/Apple2.jpg"
    ]

    var num1 = Math.floor(Math.random() * imagesArray1.length);
    var img1 = imagesArray1[num1];

    $("#picture").attr("src", img1);
}

所以我希望相应的txt文件与正在显示的图像一起显示。知道如何做到这一点吗？

Answer 1

您可以更改结构数组的数组，然后当您随机化索引时，您将获得图像和文本。

这是一个例子:

function displayPic() {    
    var imagesArray1 = new Array();

    imagesArray1 = [
        {text: "Banana", img:"img/Banana.jpeg"},
        {text: "Banana", img:"img/Banana1.jpg"}, 
        {text: "Banana", img:"img/Banana2.jpg"},
        {text: "Apple", img:"img/Apple.jpg"},
        {text: "Apple", img:"img/Apple1.jpg"},
        {text: "Apple", img:"img/Apple2.jpg"}
    ]

    var num1 = Math.floor(Math.random() * imagesArray1.length);
    var img1 = imagesArray1[num1].img;
    var text = imagesArray1[num1].text;

    //$("#picture").attr("src", img1);
    $("#img").html(img1);
    $("#text").html(text);
}

displayPic();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="img"></div>
<div id="text"></div>