jquery-mobile - 如何获取 ListView JQUERYMOBILE 中选择的元素的值

Question

嗨，我正在开发一个简单的 listView，其中列出了我的表的“名字”列:我想获取选定的值(名称)，我找到了这个链接，但它显示了他如何获取索引而不是选定的值项目 http://jsfiddle.net/w2JZU/

这是我的代码:

HTML:

<div id="popup-bg">
</div>

   <div id="popup-box"> 

   <div data-role="page" id="home">

  <div data-role="header">
    <h1>Players</h1>
   </div>

<div data-role="content">
    <ul data-role="listview" id="artiste" >
    </ul>    
</div>
</div>
</div>
</section>

js:

    function successCB()
  {
     db.transaction(queryDB, errorCB);
   }

      function queryDB(tx)
        {
        tx.executeSql('SELECT * FROM Players ', [], querySuccess, errorCB);
       }

       function querySuccess(tx, results)
         {
          var len = results.rows.length;
           var dataset= results.rows;


         $("#artiste").empty();

          for (var i = 0; i < len; i++)
         {  item = dataset.item(i);
           $("#artiste").append( "<li data-theme='c'><a href='game.html'>
          <img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );

          } 

Answer 1

使用 li 标签的列表中的项目没有“值”。但是，您可以使用 jQuery .text() 方法获取该列表元素中的内容的文本。我已经修改了你引用的 jsfiddle 来做到这一点:http://jsfiddle.net/Cht2e/

您可能需要考虑向 li 标签添加另一个属性，例如 data-name(您可以组成该属性)，然后您可以通过 jQuery .attr() 方法获得它。例如，您可能会更改附加代码以执行以下操作:

 $("#artiste").append( "<li data-theme='c' data-name='"+item['firstName']+"'><a href='game.html'>
      <img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );

然后像这样附加你的点击处理程序:

$('#artiste').children('li').on('click', function () {
   alert('Selected Name=' + $(this).attr('data-name'));
});

我认为这不一定是最好的结构或方法，但它会完成你的要求。