Как отобразить текст с определенными изображениями, используя Ajax и Jquery?

Question

Я пытался найти способ показа определенных текстовых файлов с использованием jQuery и Ajax.

TXT-файл должен отображаться при отображении определенного изображения. Например, если изображение яблока показывает, что я хочу текст под ним «Яблоко», а если изображение банана отображается, то я хочу, чтобы текст сказал «Банан» и т. Д.

Яиспользуя массив, чтобы выбрать случайные изображения для отображения, но я не могу понять, как затем показать текст под ним.

Вот мой код отображения изображения:

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);
}

Поэтому я хочу, чтобы соответствующий текстовый файл показывался с отображаемым изображением. Есть идеи как это сделать?

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>