0

我正在使用此功能为基于 Web 的移动应用程序在当前 div 上创建透明的信息覆盖。

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

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

当我单击第一个 div 上的按钮时，了解 JS 将按顺序运行，该功能工作正常。当我转到下一个 div 时，如果我单击同一个按钮，则在显示此 div 时不会“发生”任何事情，但如果我返回第一个 div，它实际上已在此页面上触发它。

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

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

4

2 回答 2

0

像这样的东西会起作用吗？我假设你想要的是不同的按钮调用toggleFade不同的覆盖 div。

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

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

您还可以将makeOverlayHandler'selector参数更改为 jQuery 对象而不是选择器，并像这样调用它makeOverlayHandler($('#overlay1'))：

于 2010-02-22T20:49:16.843 回答
0

做到这一点的最佳方法是使其全部成为relative，因此假设您有这样的标记：

<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) 开始，找到.container它正在使用的按钮.closest()，然后使用 找到它的.overlay内部.find()。使用这种方法，您只需一小段代码来处理所有绑定，更容易维护:)

于 2010-06-05T11:54:18.583 回答