Question

我们正在该应用程序中创建一个jQuery移动应用程序，我必须将Web服务数据绑定到HTML列表中，当我单击列表中的第一个项目时，它会重定向到我在同一页面中创建的第二个页面。 div标记并显示我从列表中选择的相关信息。除此之外，我将Web服务结果存储在一个数组中。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title><br />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript">
function GetSelectedValut()
 {
var list_value = $(this).attr('searchlist');
alert(list_value);
   }
</script>
</head>
<body>
<!-- Page one starts-->
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Header </h1>
    </div>
    <div data-role="content" id="page1content">
         <ul data-role="listview" data-inset="true" id="searchlist">
            <li id="search">
                <a href="#pagetwo" value="Selected one" onclick="GetSelectedValut()">Selected one</a>
             </li>
            <li id="search1" onclick="GetSelectedValut()">
                <a href="#detailpage">Selected two</a>
            </li>
            <li>
                <a href="#detailpage">Selected three</a>
            </li>
            <li>
                <a href="#detailpage">Selected four</a>
            </li>
            <li>
                <a href="#detailpage">Selected five</a>
            </li>
            <li>
                <a href="#detailpage">Selected six</a>
            </li>

        </ul>
    </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- Page one ends-->
<!-- Page two starts-->
<div data-role="page" id="pagetwo">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
    Welcome to Div two
        </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- page two ends -->
</body>
</html>

Sample image

Answer 1

没有名为“seachlist”的属性......

您为多个元素分配了相同的ID ...这会导致问题......

如果您要获取标记的文本，请将#detailpage更改为.detailpage，然后使用以下内容：

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    alert($(this).text());
  });
});
</script>

优点：你的代码中没有“onclick”...这被称为不显眼的javascript，它比用javascript东西捣乱你的html更酷。

更好的是，传递一个值，而不是担心链接内容，将所需的任何值分配给项目的ID并获取它。

享受。

Jquery参考： .ready：http://api.jquery.com/ready/

.bind：http://api.jquery.com/bind/

.text：http://api.jquery.com/text/

更新：我想在页面上更新一些div，我们检索的文字很简单：

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo').append(thetext);
  });
});
</script>

http://api.jquery.com/append/

追加将无限期地添加文本到元素的末尾。

或者如果你想更新页面2 div的特定部分，你需要像.content那样添加一个类，然后你可以这样做：

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo.content').html(thetext);
  });
});
</script>

.html会用你传递的内容填充元素。

http://api.jquery.com/html/

如果您希望在发送内容之前将内容包装在段落标记或其他内容中：

$('div#pagetwo.content').html('<p>' + thetext + '</p>');

Answer 2

试试这个，我相信你会得到结果：

<ul data-role="listview" data-inset="true" id="searchlist">
                <li>
                    <a href="#" id="selected one">Selected one</a>
                 </li>

    </ul>




 $('#searchlist li a').bind("click",function() 
      {

          var selectedId = $(this).attr("id");
          alert("your selected ID is "+ selectedId);

      });

从html中的列表中获取值时出错？

2 个答案: