javascript - JQuery Mobile 对给定类的每个 div 执行 X

Question

我正在构建一个 JQuery 移动网站，该网站在 2 个页面上有一个图像 slider 。使用以下 JS 激活 slider :

$(function () {
   $("#slider").excoloSlider();
});

其中“#slider”是呈现为 slider 的 div 的名称。

我在 2 个页面上都有这个 slider 并且给了相同的 id，并且不想将上面的代码插入到两个页面中。为了让事情变得简单，我希望能够将上面的代码添加到我在两个页面顶部引用的 .js 文件中。

但是，只有当其中一个页面是要导航到的第一个页面时，脚本才会启动。所以，我假设这意味着代码只被调用一次，并且由于后续页面的 AJAX 加载，它不会在这个新页面加载时被调用。

那么，我怎样才能运行代码来影响带有 slider 的任何/所有页面？

Answer 1

我不知道你要调用多少次 .excoloSlider(); 函数。如果每次访问页面时都必须调用它，则需要使用这些页面事件、pagecontainershow 或pagecontainerbeforeshow 中的任何一个。

如果您使用pagecontainershow，您可以在#slider 上运行.excoloSlider();，即使您在不同的id 中有相同的id页。这样，您就可以指定在哪个页面中查找 #slider。

$(document).on("pagecontainershow", function () {
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
  /* check if #slider is within active page */
  var slider = activePage.find("#slider").not(".slider");
  if(slider) {
     slider.excoloSlider();
  }
});

更新

我添加了 .not(".slider") 选择器以排除已呈现的 slider。函数 .excoloSlider() 将仅在新 slider 上调用。

Demo