Question

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

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

我有两个问题：

1）首先。我在第一页的顶部有两个按钮，其中包含搜索栏的页面。这些是单选按钮，在给定时间只能选择一个。我希望当点击其中任何一个按钮来更改我在搜索栏中看到的值时。例如，如果我选择了“唯一ID”单选框，我只想将唯一ID放在搜索框中。同样适用于其他领域。这是通过更改listview中元素的文本（自然地）来实现的，但是有一个问题。如果我更改了listview中我的一个元素中的文本（在listview中我的元素下面的脚本标签中），我会丢失html链接（和间距 - 新框更小，更紧凑）。我如何重新添加按钮的链接，使其行为与以前相同（将用户带到第二页）

2）这个是可选的，但是有一种方法可以重置我点击的按钮的默认值（由样本选择选择），只需更改文本，而不是调整大小＆amp;缩小盒子？这里的建议不起作用：mobile navbar resizes on changing text of an item

<!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>

Answer 1

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

首先将两个属性data-属性添加到Listview中的li。像这样：

<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，所以也许其他人可以在这一点上加入。< / p>

JQuery Mobile - 如何添加链接到列表元素

1 个答案: