Question

我有一个ul元素，其中包含从li文件加载的json个元素。我想根据点击的id元素的li将位于该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 code：

             <!--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加载到li s

的代码

$.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);        
});

Answer 2

$(document).on('click','#namesListView',function(){
    var myId = $(this).attr('id');
});

Answer 3

尝试

$(function() {
    var data = {
        "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"
            }
        ]
};
$.ajax({
    // url:"/echo/json/",
    dataType:"json",
    type:"POST", // "GET"
    cache:"false",
    // data: {json : JSON.stringify(data)},
    success:function(data){
        console.log(data);
        $(data.abc).each(function(index,value){
            console.log(value.name);
            // add `id` to `li`
            $("#namesListView").append("<li id="+value.id+"><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
        });
    },
    complete: function() {
        $('#namesListView').listview('refresh');
    }
});
    $(document).on('click','#namesListView',function(e) {
    // `log` `id` of parent `li`
    console.log($(e.target).parent("li").attr("id"));
});
});

jsfiddle http://jsfiddle.net/guest271314/6tdzZ/

Answer 4

您可以将整个项目传递给li的数据属性，如下所示：

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

    $myLi
        .data(value)
        .html($innerAnchor);

    $("#namesListView").append($myLi);

});

或者只传递一些像这样的值：

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");
    var dataToPass = {
        id: value.id,
        name: value.name
    };

    $myLi
        .data(dataToPass)
        .html($innerAnchor);

    $("#namesListView").append($myLi);
});

然后像这样访问它：

$(document).on('click','#namesListView li',function(){

    // the li element contains all scientist data

    var scientistDetails = $(this).data();
    console.log(scientistDetails.name, scientistDetails);     

});

你的例子看起来像这样：

$(document).ready(function()
{
    $.ajax({
        url:"scientists.json",
        dataType:"json",
        type:"get",
        cache:"false",
        success:function(data){

            data.abc.forEach(function(value){

                var $myLi = $('<li></li>');
                var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

                $myLi
                  .data(value)
                  .html($innerAnchor);

                $("#namesListView").append($myLi);
            });
        },
        complete: function() {
            $('#namesListView').listview('refresh');
        }
    });

    $(document).on('click','#namesListView li',function(){

        // the li element contains all scientist data

        var scientistDetails = $(this).data();
        console.log(scientistDetails.name, scientistDetails);     

    });
});

jsfiddle http://jsfiddle.net/c3AvL/

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

4 个答案: