0

社区，

我正在尝试使用静态 jquery-mobile 应用程序。它的作用是在其上有一个很大的静态列表<div data-role="page" id="page1">

每当单击/点击一个项目时，必须<div data-role="page" id="page2">使用 switch-case 决策在固定占位符中显示一些相应的详细信息，<img>例如统一的标签的变量 SRC 详细信息。

我的困惑是，我该如何实现这一目标？jQuery的选择器是否#id可以实现这一特定目标？如果是，那么我该如何进行？什么应该是帮助我检测和显示列表项的相应详细信息的片段。请稍加指导

我的列表结构：

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-icon="false" data-filter-placeholder="Search" class="jqm-list" id="list">

<li id="A"><a href="#page2" data-ajax="false">A</a></li>
<li id="B"><a href="#page2" data-ajax="false">B</a></li>
<li id="C"><a href="#page2" data-ajax="false">C</a></li>
<li id="D"><a href="#page2" data-ajax="false">D</a></li>
</ul>

如果我在某个地方错了，请纠正我谢谢

4

1 回答 1

1

event.target 将为您提供触发事件的元素，或 $(this)。因此，例如，您可以执行类似的操作

    $("li").click(function(event) {
       var clickedItemID = event.target.id;
      //your snipped to affect page 2 goes here ....
    });

根据页面上的其他内容，您可能希望更好地定位事件，而不是显然附加到每个 li。

编辑

如果您可以根据从事件中收到的 ID 附加到其他元素来修改内容，那么您可能无需使用 switch/case 语句就可以逃脱。例如，如果单击时您正在更改其他页面上的图像，则可以使用类似

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    $('#page2-image').attr('src', list_id + '.jpeg');

});

如果您可以摆脱这种方法，那么它比 switch/case 更好，因为每次添加/删除选项时都不需要编辑该功能。顺便说一句 - 以上只是一个粗略的例子，并没有考虑到 jquery 移动页面之间的任何数据传递。

另一种选择是

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    switch(list_id)
    {
        case "A":
            //execute code block 1
        break;
        case "B":
            //execute code block 2
        break;
        case "C":
            //execute code block 2
        break;
        case "D":
            //execute code block 2
        break;
        default:
            //code to be executed if case not covered above
     }

});

如您所见，这需要更多代码。

格伦

于 2013-11-08T20:00:09.413 回答