1

我正在设计一个供大学生使用的移动网页。为简单起见，每个学生都被分配了一个唯一的 ID 和一个附加字段。这两个字段都可以视为字符串，唯一的 id 是唯一的，而第二个字段可能是唯一的，但不能保证是唯一的。在下面的代码中有模拟学生信息数据库的示例数据。

网页打开，有一个搜索字段可以输入这些字段中的任何一个。当您输入唯一 ID 或其他字段时，搜索字段会查询存储的元素并显示匹配的元素。如果您单击其中一个条目，它将带您进入第二页，其中将显示两个字段（无需显示代码）。第二页上有一个后退按钮，可让您进入第一页。

我有两个问题：

1) 首先。我在第一页的顶部有两个按钮，即带有搜索栏的页面。这些是单选按钮，在给定时间只能选择一个。我想点击这些按钮中的任何一个来更改我在搜索栏中看到的值。例如，如果我选择了“唯一 ID”单选框，我只希望唯一 ID 出现在搜索框中。另一个领域也是如此。这是通过更改列表视图中元素的文本来完成的（自然），但是有一个问题。如果我更改列表视图中的一个元素中的文本（在列表视图中我的元素下方的脚本标记中），我会丢失 html 链接（和间距 - 新框更小更紧凑）。我如何重新添加到按钮的链接，使其行为方式与以前相同（将用户带到第二页）

2）这个是可选的，但有没有办法重置我单击按钮的默认值（由样本选择选择）以简单地更改文本，而不是调整大小和缩小框？这里的建议不起作用：移动导航栏在更改项目文本时调整大小

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head>
<body>
    <div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Home</h1><!--Header text-->
    </div>
            <div data-role="content">
            <ul data-role="listview" data-filter="true" data-inset="true" data-filter-placeholder="Search" id="list" data-filter-reveal="true" data-prevent-focus-zoom="true">
            <li id="1234" lang="ILIKEFROGS"><a href="#student">1234567</a></li>
            <li id="9281" lang="LICENSE2"><a href="#student">9281736</a></li>
            <li id="0233" lang="PICKLES"><a href="#student">0233392</a></li>
            <li id="7732" lang="FOEREST"><a href="#student">7732825</a></li>
            <li id="2245" lang="BLASTOISE"><a href="#student">2245722</a></li>
            <li id="9956" lang="CHARMANDER"><a href="#student">9956353</a></li>
            <li id="2245" lang="BULBASAUR"><a href="#student">2245871</a></li>


            </ul>
            <script>
                $("li").bind("click", function() {

                    this.innerText = this.lang;
                });
                                $("li").unbind("click");
            </script>
            </div>
    </div>

    <div data-role="page" id="student">
            <div data-role="header" data-theme="b" data-position="fixed">
                <a href="#home" data-icon="back" class="ui-btn-left">Back</a>
                    <h1>Student info</h1>
            </div>
      </div>
    </body>
</html>
4

1 回答 1

1

有几种方法可以完成您的要求。这是一个想法。

首先将这两个属性作为data-属性添加到liListview 中的 s 中。像这样：

<li id="1234" data-lang="ILIKEFROGS" data-id="1234567"><a href="#student">1234567</a></li>
<li id="9281" data-lang="LICENSE2" data-id="9281736"><a href="#student">9281736</a></li>
<li id="0233" data-lang="PICKLES" data-id="0233392"><a href="#student">0233392</a></li>
<!-- snip -->

这将使以后更容易交换值。现在添加一些无线电选择器：

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Search by:</legend>
    <input type="radio" name="search-by" id="search-by-id" value="id" checked="checked" />
    <label for="search-by-id">ID</label>

    <input type="radio" name="search-by" id="search-by-lang" value="lang" />
    <label for="search-by-lang">Lang</label>
   </fieldset>
</div>

最后，当您选择收音机时，我们需要一些 JavaScript 将它们联系在一起：

$("input[name='search-by']").on('click', function(event) {
    var prop = $(this).val(); // which 'data-' property are we searching by
    var target = $("#list");  // your listview

    // Swap out values
    target.find("li").each(function() {
        var $this = $(this);
        var newvalue = $this.data(prop); // the new text value is pulled from the element
        $this.find("a").text(newvalue);  //make the change
    });
});

你可以在这里看到一个工作演示：http: //jsfiddle.net/5cpKW/4/

我唯一想不通的是，如果您在显示一些新收音机后选择新收音机，则结果会更新，但我以前从未使用过 jQuery Mobile，所以也许其他人可以在这一点上加入。

于 2013-05-30T17:35:03.943 回答