Question

我有一系列图片以及加载内容页面的时间。数组中的一张图片将附加到<div> id并显示。

var GameQuestion = ["A?", "B?", "C?"];

var GameAnswer = [
  ["lib/True.png", "lib/False.png"],
  ["lib/True.png", "lib/False.png"],
  ["lib/True.png", "lib/False.png"]
];

var answerList,
  random_Question;

random_Question = Math.floor(Math.random() * GameQuestion.length);

$("#question").html(GameQuestion[random_Question]);

answerList = GameAnswer[random_Question];

$("#Answer_1").html(answerList[0]);
$("#Answer_2").html(answerList[1]);

<!-- Original Question -->
<div id="question" style="position:absolute; z-index:6; top:750px; left:160px; margin:auto; color:#FFFFFF; font-size:30px; width:800px; text-align: center;"></div>

<!-- Answer-Original-Choice List -->
<div id="Answer_1" class="answers" style="position:absolute; z-index:6; top:1006px; left:224px; margin:auto; color:#FFFFFF; font-size:25px; width:750px;"></div>
<div id="Answer_2" class="answers" style="position:absolute; z-index:6; top:1186px; left:224px; margin:auto; color:#FFFFFF; font-size:25px; width:750px;"></div>

当内容页面加载时，我只能看到问题，但是，应该附加和显示图像的部分。它只显示文件路径名。

因此，如果内容页面加载了问题：A？，则2图像ID应加载并显示True＆amp;的图像。假。但是在这一点上，我只看到img id为“Answer_1”和“Answer_2”的文件路径名“lib / True.png”和“lib / False.png”。

因此，出了什么问题？因为我需要img id来显示图像而不是显示文件路径名。

请帮忙。三江源

Answer 1

您必须创建一个<img>属性src。有几种方法可以解决这个问题，创建HTML字符串非常简单：

$("#Answer_1").html("<img src='" + answerList[0] + "'/>")

这将创建一个类似"<img src='lib/False.png'/>"的字符串。 jQuery html方法会将它放在您的#Answer_1 div中，浏览器会将其解析为HTML。

更好的方法可能是已创建<img>代码并仅更新src属性。您的HTML将类似于：

<div><img id="Answer_1" /></div>

使用js：

$("#Answer_1").attr("src", answerList[0]);

现在，浏览器不必每次都删除/注入新图像。

（请注意，图片无法在代码段中使用）

var GameQuestion = ["A?", "B?", "C?"];

var GameAnswer = [
  ["lib/True.png", "lib/False.png"],
  ["lib/True.png", "lib/False.png"],
  ["lib/True.png", "lib/False.png"]
];

var answerList,
  random_Question;

random_Question = Math.floor(Math.random() * GameQuestion.length);

$("#question").html(GameQuestion[random_Question]);

answerList = GameAnswer[random_Question];

$("#Answer_1").html("<img src='" + answerList[0] + "'/>");
$("#Answer_2").html("<img src='" + answerList[1] + "'/>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Original Question -->
<div id="question" style="position:absolute; z-index:6; top:750px; left:160px; margin:auto; color:#FFFFFF; font-size:30px; width:800px; text-align: center;"></div>

<!-- Answer-Original-Choice List -->
<div id="Answer_1" class="answers" style="position:absolute; z-index:6; top:1006px; left:224px; margin:auto; color:#FFFFFF; font-size:25px; width:750px;"></div>
<div id="Answer_2" class="answers" style="position:absolute; z-index:6; top:1186px; left:224px; margin:auto; color:#FFFFFF; font-size:25px; width:750px;"></div>

数组中的图像不会附加到<div> id

1 个答案: