个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我在使用 JQuery 读取 json 文件时遇到问题。我对 JQuery 了解不多。我有以下 JSON 文件。
[
{'tag':'Hannover'},
{'tag':'Berlin'},
{'tag':'Munich'},
{'tag':'Frankfurt'},
{'tag':'Hamburg'}
]
和Javascript如下:
<script>
$.getJSON('tagData.json', function(data){
$.each(data.items, function(key, val){
$("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list')
});
});
$(document).ready(function() {
var $listGroup = $('.list')
$.each(myTags, function(){
$("<span name='tagList' class='tag label label-info'><span>"+this.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo($listGroup);
});
$('#addButton').click(function() {
var toAdd=$('input[name=checkbox]').val();
var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>"
$(tag).appendTo('.list');
});
$('.list').on('click','span',function() {
$(this).parent().remove();
});
});
</script>
和下面提到的 HTML 代码:
<html>
<body>
<div class="text-center">
<div class="list">
</div>
</div>
<br><br>
<div class="text-center">
<input type='text' name='checkbox'/>
<br><br>
<button id="addButton" class="btn btn-primary">Add New</button>
</div>
</body>
</html>
现在我想要的是它应该显示文件中的标签，而且如果我想手动添加更多标签，那么我必须能够这样做。
我已经设法手动添加标签，但是当我尝试添加 JSON 文件时，它不会读取它，也不允许我手动添加。对此的任何帮助将不胜感激。
下图显示了我到目前为止所做的事情。
fiddle 也是 here
谢谢。
标签建议页面截图
最佳答案
请点击此 jsFiddle 链接，我已经解决了您的问题。 https://jsfiddle.net/xncp92ho/1/
$(document).ready(function() {
$.getJSON('https://api.myjson.com/bins/4skih', function(res){
$.each(res.data, function(key, val){
$("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list')
});
$('#addButton').click(function() {
var toAdd=$('input[name=checkbox]').val();
var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>"
$(".list").append(tag);
});
});
关于javascript - 如何在 HTML 页面上使用 JQuery 显示来自 json 文件的标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38099169/
26
4
0
我是一名优秀的程序员,十分优秀！