Javascript 具有多个具有相同名称且需要滑动打开的面板的页面_Javascript_Jquery_Jquery Mobile_Swipe

Javascript 具有多个具有相同名称且需要滑动打开的面板的页面

javascript jquery jquery-mobile

Javascript 具有多个具有相同名称且需要滑动打开的面板的页面,javascript,jquery,jquery-mobile,swipe,Javascript,Jquery,Jquery Mobile,Swipe,例如，我的文档中有两个带有面板的页面，这些面板的名称相同，如下所示： <html> ... <body> <div data-role="page" id="page1"> <div data-role="panel" id="left-panel">...</div> <div data-role="panel" id="right-panel">...</div>

例如，我的文档中有两个带有面板的页面，这些面板的名称相同，如下所示：

<html>
  ...
  <body>
    <div data-role="page" id="page1">
      <div data-role="panel" id="left-panel">...</div>
      <div data-role="panel" id="right-panel">...</div>
      ...
    </div>
    <div data-role="page" id="page2">
      <div data-role="panel" id="left-panel">...</div>
      <div data-role="panel" id="right-panel">...</div>
      ...
    </div>
  </body>
</html>

它位于

$（document）中我认为，因为我将滑动侦听器绑定到每个页面，所以每个页面都有滑动功能，但没有这样的运气
有什么办法可以做我想做的吗？我尝试了多种解决方案，比如每次页面更改时只加载滑动侦听器代码，在每个页面上使用类（.page
），并使用滑动侦听器代码的一个实例，但似乎没有任何效果
 因此我发现，@alkis you部分正确，多个ID会干扰jQuery Mobile，但除了区分面板ID之外，我还必须将javascript文件的绑定更改为$（document）.ready（function（）{…}）
然后将每个刷卡处理程序包装在自己的$（“#pagenamehere”）。在（“pageinit”，function（）{…}）上绑定+1对于你@alkis，如果你没有提到多个ID，我就不会明白，我只是想，因为它们是独立的页面，我可以使用相同的ID，只有一个刷卡处理程序，没有这样的运气。谢谢。
尝试'pageinit'，“[data role=page'，function（）
如果它不起作用，请删除pageinit
绑定。尝试了你的两个建议，但都不起作用。请稍等。你的html是一页吗？如果是，那么你有两个相同的ID，你在每个页面中都有面板吗？顺便说一句，我在第一次评论中有一个错误，我忘了]
。应该是[data role=page]您的事件处理程序很好，但是您确定这两个ID不会弄乱jqm吗？
 $("#page1").on("swipeleft swiperight", function(e) {
    if ($.mobile.activePage.jqmData("panel") !== "open") {
        if (e.type === "swipeleft") {
            $("#right-panel").panel("open");
        } else if (e.type === "swiperight") {
            $("#left-panel").panel("open");
        }
    }
});

$("#page2").on("swipeleft swiperight", function(e) {
    if ($.mobile.activePage.jqmData("panel") !== "open") {
        if (e.type === "swipeleft") {
            $("#right-panel").panel("open");
        } else if (e.type === "swiperight") {
            $("#left-panel").panel("open");
        }
    }
});