Question

社区，

我正在尝试使用静态jquery-mobile应用程序。它的作用是在<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>

如果我错了，请纠正我感谢

Answer 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
     }

});

您可以看到需要更多代码。

格伦

如何在一个data-role =“page”中检测特定列表视图项的单击，并在另一个上显示相应的数据

1 个答案: