jquery click获取该条json数据

newbie
  • 23

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中,点哪个,传递哪个?
})
})
回复
阅读 2.2k
5 个回答

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

图片描述

$(function(){
$.getJSON("js/test.json",function(data){
    $('#ul').html('');
    $.each(data,function(i,item) {
        $('#ul').append('<li name='+item.name+' staus='+item.staus+' size='+item.size+'></li>');
    });
})
$('#ul li').click(function(){
    alert($(this).attr('name'));
})

这个好怪异,你看看我写这个,符合你的需求吗?

[
{ "name": "abc",
  "staus": "abc",
  "size": "abc"
},
{ "name": "456",
  "staus": "456",
  "size": "456"
},
{ "name": "www",
  "staus": "www",
  "size": "www"
}
]

<ul id ="ul">
 <li></li>
 <li></li>
 <li></li>
</ul>

$(function(){
    $.getJSON("js/test.json",function(data){
        var $ulLi = $('#ul li');
        for(var i in data){
            $ulLi.eq(i).attr("data-name",data[i].name);
        }
    })
    $('#ul li').click(function(){
        $(this).text($(this).attr("data-name"));
    })
})

怎么这么写呢?,可以先取回数据保存到一个变量,再绑定li的click事件不是更好吗?

也就是说你的数据就只有test.json这一份文件咯?

如果是这样的话,我倒建议你不要在每次click事件里做getJSON操作,看起来就像是每点击一次就要发一次请求,或者做成第一次点就getJSON,然后将数据存放到事先声明好的变量上,以后click,就是对这个变量进行数据匹配然后获取就行了。

至于点击第几个,主体其实是,数据就是一个数组了,第几个li,用`$(this).index()'能获取到自己在父元素上的索引。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏