如何检测一个数据角色=“页面”中对特定列表视图项的单击，并在另一个数据上显示相应的数据

How to detect a click on particular list view item in one data-role="page" and display corresponding data on other

本文关键字：数据 单击 列表 视图 显示 另一个 一个 检测 何检测 角色 页面      更新时间：2023-09-26

Community，

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

每当单击/点击某个项目时，都必须使用开关大小写决策在固定占位符中的<div data-role="page" id="page2">上显示一些相应的详细信息，例如，统一的<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>

如果我在某处错了，请纠正我谢谢

event.target 将为您提供触发事件的元素，或 $（this）。例如，您可以做类似的事情 

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

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

编辑

如果可以根据将从事件接收的 ID 附加到其他元素来修改内容，则可以在没有开关/case 语句的情况下逃脱。例如，如果单击时您正在更改其他页面上的图像，则可以使用类似

$("li").click(function(e) {
    var list_id = $(this).attr('id');
    $('#page2-image').attr('src', list_id + '.jpeg');
});

如果您可以摆脱这种方法，它比开关/大小写更好，因为每次添加/删除选项时都不需要编辑该功能。顺便说一句 - 以上只是一个粗略的例子，没有考虑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
     }
});

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

幽谷

相关文章：