为了账号安全,请及时绑定邮箱和手机立即绑定

jquery click获取该条json数据

jquery click获取该条json数据

温温酱 2018-10-16 14:15:46
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中,点哪个,传递哪个?})})
查看完整描述

1 回答

?
皈依舞

TA贡献1851条经验 获得超3个赞

有个思路就是,首先你要获取你点击的这个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);
            })
        })
    })

https://img1.sycdn.imooc.com//5bdbb8b10001c76d12660149.jpg

查看完整回答
反对 回复 2018-11-02
  • 1 回答
  • 0 关注
  • 548 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号