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

【问题标题】：error when getting value from list in html?从html中的列表获取值时出错？
【发布时间】：2011-03-15 09:07:02
【问题描述】：

我们正在该应用程序中创建一个 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>

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

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

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

如果您尝试获取 a 标签的文本，请将 #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/

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>');

【讨论】：

Header

欢迎来到二区

Footer
我想在第二页（div）那里显示？
我不明白你的问题...你能详细说明你在问什么吗？
我看到了...我想您希望使用链接中的文本更新 page2 div？在这种情况下，它很简单......我将用代码编辑我的答案。查阅 jquery api，这一切都有据可查且相当清楚（但也许我刚刚习惯了！）

【解决方案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);

      });

【讨论】：