Javascript Jquery测验-在数组中使用图像而不是文本

我有一个选择题测验，我想使用图像作为选项，而不是使用文本。我试着使用内置img的divs，但不起作用。有没有不同的方法来解决这个问题

var quizData=[
{问题：“哪种动物能在森林中生存？”，
答案：[“狮子”、“青蛙”、“鸽子”]，
答:二,，
反馈：“青蛙几乎可以生活在任何地方，除了安塔蒂卡，它们更喜欢生活在沼泽、池塘和湖泊。”
},
]
函数showQuestion（）{
$（“#问题”）.html（quizData[currentQuestion-1].question）；
$（“#answer1”）.html（quizData[currentQuestion-1].answers[0]）；
$（“#answer2”）.html（quizData[currentQuestion-1].answers[1]）；
$（“#answer3”）.html（quizData[currentQuestion-1].answers[2]）；
$（“#反馈”）.html（quizData[currentQuestion-1]。反馈）；
}
答复1
答复2
答复3
这里有反馈

在

答案框中添加
高度

.answer-box{
    width: 600px;
    height:400px;
    background-color: white;
    padding: 20px;
    color: #666;
    margin: 10px 0;
    font-size: 0.7em;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
}

然后在
内制作图像。回答框
填充

.answer-box img {
height:100%;
width:100%;
object-fit:cover;
}

您可以将
应答框的
高度
和
宽度
调整到您喜欢的任何位置，而不仅仅是
600px
和
200px

然后将
img
添加到每个
img
带有
id
的标签中

<div id="answer1" class="answer-box"><img id="img1" src="/someimage.png"/></div>

这样修改
showQuestion

function showQuestion(){
    $("#question").html(quizData[currentQuestion-1].question);
    $("#img1").attr("src",quizData[currentQuestion-1].imgs[0]);
    $("#img2").attr("src",quizData[currentQuestion-1].imgs[1]);
    $("#img3").attr("src",quizData[currentQuestion-1].imgs[2]);
    $("#feedback").html(quizData[currentQuestion-1].feedback);
}

因此，现在将更改图像的
src
，并将其设置为
currentQuestion
中
imgs
数组中的值，在
答案框中添加
高度

.answer-box{
    width: 600px;
    height:400px;
    background-color: white;
    padding: 20px;
    color: #666;
    margin: 10px 0;
    font-size: 0.7em;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
}

然后在
内制作图像。回答框
填充

.answer-box img {
height:100%;
width:100%;
object-fit:cover;
}

您可以将
应答框的
高度
和
宽度
调整到您喜欢的任何位置，而不仅仅是
600px
和
200px

然后将
img
添加到每个
img
带有
id
的标签中

<div id="answer1" class="answer-box"><img id="img1" src="/someimage.png"/></div>

这样修改
showQuestion

function showQuestion(){
    $("#question").html(quizData[currentQuestion-1].question);
    $("#img1").attr("src",quizData[currentQuestion-1].imgs[0]);
    $("#img2").attr("src",quizData[currentQuestion-1].imgs[1]);
    $("#img3").attr("src",quizData[currentQuestion-1].imgs[2]);
    $("#feedback").html(quizData[currentQuestion-1].feedback);
}

因此，这将更改图像的
src
，并将它们设置为
currentQuestion
中
imgs
数组中的值。非常感谢您的帮助，但是如何通过JS更改图像呢？我想知道是否有一种方法可以通过var quizData更改这些图像。因此，对于每个答案，都要修改相应的图像。现在，它展示了一种在
varData
中设置img URL的方法，并随着每个问题的变化而变化。哦，这很有意义，我不知道我怎么会没有想到这一点。非常感谢你，非常感谢你的帮助。非常感谢你的帮助，但是我如何通过JS更改图像呢？我想知道是否有一种方法可以通过var quizData更改这些图像。因此，对于每个答案，都要修改相应的图像。现在，它展示了一种在
varData
中设置img URL的方法，并随着每个问题的变化而变化。哦，这很有意义，我不知道我怎么会没有想到这一点。非常感谢你，谢谢你的帮助。