从点击获取li值并进入onClick方法

时间:2013-09-09 19:21:32

标签: jquery html html5

我有这三个li,使用这个addToListview方法在屏幕上完美显示。当我点击其中一个时,它运行“test()” - 方法,这也很好。 但是我需要点击字段的“tempobj.name”(或显示的屏幕名称)作为参数,如 test(TextOnTheChosenLi); ,因为我需要它来获得正确的“obj.page”。 我该怎么做?

  function addToListview(){
var listofitems = [];


var item1 = new Object;
var item2 = new Object;
var item3 = new Object;
item1.name = "item1"
item1.page = "info1"
item2.name = "item2"
item2.page = "info2"
item3.name = "item3"
item3.page = "info3"

listofitems.push(item1);
listofitems.push(item2);
listofitems.push(item3);

for (var i=0; i<listofitems.length; i++)
{
tempobj = listofitems[i];

$('ul').append($('<li/>', {    
'data-role': "list-divider"
}).append($('<a/>', {    
    'href': 'somepage.html',
    'onclick': 'test()',
    'data-transition': 'slide',
    'text': tempobj.name

})));


    }
$('ul').listview('refresh');
}

2 个答案:

答案 0 :(得分:1)

这可能不是使用jquery的最佳解决方案,但我认为它至少可以满足您的需求:http://jsfiddle.net/LvE7e/

function test(obj) {
    alert(obj.text);   
}


...

'onclick': 'test(this)',

...

答案 1 :(得分:0)

您可以使代码更清洁:

var list = [
    {
        name: "item1";
        page: "info1"
    },
    {
        name: "item2";
        page: "info2"
    },
    {
        name: "item3";
        page: "info3"
    }
];


function addToListview(arr, dest){

    var list = "";

    for (var i = 0, ilen = arr.length; ilen; i += 1) {
        list += '<li>' + 
                    '<a href="somepage.html" data-transition="slide">' + 
                        arr[i].name + 
                    '</a>' +
                '</li>';
    }


    $(dest).append(list);
    // unbind so you won't bind multiple events if the function is 
    // executed more than once
    $(dest + " > a").unbind().on('click', function (e) {
        e.preventDefault();
        test(this);
    });

};

addToListview(list, '#destination');