Saya telah mencoba menemukan cara untuk menampilkan file teks tertentu menggunakan jQuery dan Ajax.

File txt akan muncul saat gambar tertentu ditampilkan. Misalnya, jika gambar apel ditampilkan, saya ingin teks di bawahnya bertuliskan "Apple" dan jika gambar Pisang ditampilkan, saya ingin teks bertuliskan "Banana" dan lain-lain.

Saya menggunakan array untuk memilih gambar acak untuk ditampilkan, tetapi saya tidak tahu bagaimana cara menampilkan teks di bawahnya.

Ini kode tampilan gambar saya:

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

Jadi saya ingin file txt yang sesuai ditampilkan dengan gambar yang sedang ditampilkan. Ada ide bagaimana caranya mengerjakan ini?

0
wzrd 26 Oktober 2019, 21:56

1 menjawab

Jawaban Terbaik

Anda dapat mengubah array untuk array struct, kemudian ketika Anda mengacak indeks, Anda akan memiliki gambar dan teks.

Berikut ini contohnya:

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>
1
matmartino 26 Oktober 2019, 19:54