时间戳

首页 > 解决方案 > 如何使用 Ajax 和 Jquery 显示带有某些图像的文本？

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

问题描述

我一直在尝试找到一种使用 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 文件与正在显示的图像一起显示。知道怎么做吗？

标签： javascriptjqueryhtmlajax

解决方案

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

这是一个例子：

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>

推荐阅读