javascript - jquery click获取该条json数据
本文介绍了javascript - jquery click获取该条json数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
json文件(test.json)
[
{ "name": "abc",
"staus": "abc",
"size": "abc"
},
{ "name": "456",
"staus": "456",
"size": "456"
},
{ "name": "www",
"staus": "www",
"size": "www"
}
]
html代码
<ul id ="ul">
<li></li>
<li></li>
<li></li>
</ul>
jquery代码
$(function(){
$('#ul li').click(function(){
$.getJSON("js/test.json",function(data){
//这里的代码该如何写,保证我点击不同的li的时候,获取就是该条josn数据。比如我
点击第二个li,那么name对应的值就是456传递到第二个li中,我点击第三个li,name对应的值就是www传递到第三个li中,点哪个,传递哪个?
})
})
解决方案
有个思路就是,首先你要获取你点击的这个li,然后获取li的index,将index作为参数传到json数组获取对应的数据,以下是实现代码,测试过是可以的,你试一下,正确请采纳
$(function(){
$('#ul li').click(function() {
//获得当前点击li
var thisLi = $(this);
//获取当前li的index
var index = thisLi.index();
$.getJSON("js/test.json", function (data) {
//这里的代码该如何写,保证我点击不同的li的时候,获取就是该条josn数据。比如我
// 将对应的数据显示到对应的li标签中
console.log(index);
console.log(data[index]);
thisLi.text(data[index].name);
})
})
})
这篇关于javascript - jquery click获取该条json数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文