作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这可能是一个非常简单的问题,但我似乎无法在任何地方找到答案或解释。
如何以及在哪里连接 map (图像文件来自哪里)对于我放置在 JSON 中的图像和名称,因为图像需要出现在我的浏览器窗口中。我对 JSON、循环和 JS 还很陌生。
这是我的代码,如果您需要查看它,以了解我是如何制作它的。
JSON;
{ "main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
"woorden": ["words", "not", "needed", "yet"]
}
}
//JavaScript
var jsonData = "noJson";
var hr = new XMLHttpRequest();
$(document).ready(function() {
var jsonData = 'empty';
$.ajax({
async: false,
url: "./js/data.json",
dataType: 'html',
success: function(response) {
jsonData = JSON.parse(response);
console.log('ok');
imagesJ = jsonData.main_object.imagesJ;
woorden = jsonData.main_object.woorden;
for (i = 0; i < imagesJ.length; i++) {
imagesJ[i] + '.jpg';
// => /img/[imagesJ[x]].jpg
}
},
error: function() {
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sleepopdracht</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
</header>
<div class="container" id="container">
<div class="images" id="images"></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
最佳答案
听起来您想要的是添加 image tag对于 imagesJ
中的每个图像。您的循环结构对此很有好处,您可以使用 jQuery to append()
将图像标签添加到div id="images"
。 for 循环看起来像这样:
for (i = 0; i < imagesJ.length; i++) {
var path = imagesJ[i] + '.jpg';
$('#images').append('<img id="image' + i + '" src="' + path + '" />');
}
关于javascript - 将 map 连接到 json 文件 for 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36200328/
我正在开发一个 voip 调用应用程序。我需要做的是在接到来电时将 Activity 带到前台。我在应用程序中使用 Twilio,并在收到推送消息时开始调用。 问题是我试图在接到任何电话时显示 Act
我是一名优秀的程序员,十分优秀!