Question

我正在使用此功能在基于网络的移动应用的当前div上创建透明的信息叠加层。

背景：使用jQTouch，所以我有单独的div，而不是单个页面加载新的。

$(document).ready(function() { 
    $('.infoBtn').click(function() {
        $('#overlay').toggleFade(400);
        return false;    
     });
 });

了解当我单击第一个div上的按钮时JS将按顺序运行，该功能正常工作。当我进入下一个div时，如果我点击相同的按钮，当显示这个div时没有“发生”，但是如果我回到第一个div，它实际上已经在这个页面上触发了它。

所以我在逻辑上复制了这个函数并更改了CSS选择器名称，它适用于两者。

但每次使用时我是否必须这样做？有没有办法使用相同的选择器，但在每个变体中加载不同的内容？

Answer 1

这样的事情会起作用吗？我假设你想要的是不同的按钮在不同的叠加div上调用toggleFade。

function makeOverlayHandler(selector) {
    return function() {
        $(selector).toggleFade(400);
        return false;
    }
}

$('button selector').click(makeOverlayHandler('#overlay1'));
$('another button selector').click(makeOverlayHandler('#overlay2'));

您还可以将makeOverlayHandler的{{1}}参数更改为jQuery对象而不是选择器，并将其调用为：selector。

Answer 2

这样做的最好方法是将所有相对，所以说你有这样的标记：

<div class="container">
  <div class="overlay">Overlay content</div>
  <button class="infoBtn">Click to show overlay</button>
</div>

然后您可以实现找到此按钮的叠加层，如下所示：

$(function() { //equivalent to $(document).ready(function() {
  $('.infoBtn').click(function() {
    $(this).closest('.container').find('.overlay').toggleFade(400);
    return false;
  });
});

您可以进一步优化，例如.children('.overlay')如果叠加始终是容器的直接子级。这来自当前按钮（this），使用.closest()找到它的.container，然后使用.find()在其中找到.overlay。使用这种方法，您只需要一小段代码来处理所有绑定，更容易维护：）

我必须复制此功能吗？ - jQuery

2 个答案: