javascript - jQuery如何检测从json文件加载的li元素的id

Question

我有一个 ul 元素，其中包含从 json 文件加载的 li 元素。我想根据单击的 li 元素的 id 将该 json 文件内的一些数据传递到另一个页面(jquery 移动页面)。由于某种原因我无法让它发挥作用。我错过了什么？

这是我的 json 文件的结构。

    {
        "abc":
         [
            {
                "id": 1,
                "name": "Nikola Tesla",
                "image": "http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/640px-Tesla_circa_1890.jpeg",
                "price": "100"
            }
        ]
}

HTML 代码:

             <!--PAGE WITH A LIST OF SCIENTISTS -->
<div data-role="page" id="scientists">
    <div data-role="header"><h3>great scientists</h3></div>
    <div data-role="content">
            <div>
                <ul data-role="listview" data-inset="true" data-filter="true" id="namesListView"></ul>
             </div>
     </div>
 </div>

                <!--A PAGE WITH all details about selected SCIENTIST -->
<div data-role="page" id="sc">
    <div id="details_of_selected"></div>
        <img id="pic" src=""/>
</div>

我能够检测到 li 列表上的点击，但无法提取元素的 id。

$(document).on('click','#namesListView',function(){
    console.log("li was clicked");
});

将数据从 json 加载到 lis

的代码

$.ajax({
    url:"scientists.json",
    dataType:"json",
    type:"get",
    cache:"false",
    success:function(data){
        console.log(data);
        $(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
        });
    },
    complete: function() {
        $('#namesListView').listview('refresh');
    }
});

Answer 1

最好添加从 JSON 检索到的数组中的数据索引。

$(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li data-index='" + index + "'><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
        });

现在你可以这样做:

$(document).on('click','#namesListView',function(){
    var myIndex = $(this).data('index'); 
})

我还会添加一个变量来保存您的数据；

var abc = [];

这样您就可以获得您想要的数据。所以就其整体而言:

var abc = [];
$(document).ready(function()
{
    $.ajax({
        url:"scientists.json",
        dataType:"json",
        type:"get",
        cache:"false",
        success:function(data){
            abc = data.abc;
            $(abc).each(function(index,value){
                console.log(value.name);
                $("#namesListView").append("<li data-index='" + index + "'><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
            });
        },
        complete: function() {
            $('#namesListView').listview('refresh');
        }
    });
});

$(document).on('click','#namesListView li',function(){ //  change here so you are clicking on an LI and not the parent UL element.
    var index = $(this).data('index');
    alert(abc[index].name);        
});