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

【问题标题】：Do I have to duplicate this function? - jQuery我必须复制此功能吗？ - jQuery
【发布时间】：2010-06-05 19:55:43
【问题描述】：

我正在使用此函数在基于 Web 的移动应用的当前 div 上创建透明的信息覆盖。

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

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

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

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

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

【问题讨论】：

标签： javascript jquery html css jqtouch

【解决方案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 的selector 参数更改为jQuery 对象而不是选择器，并像这样调用它：makeOverlayHandler($('#overlay1'))。

【讨论】：

这就是我想做的。我会调查一下，看看它是否有效。谢谢

【解决方案2】：

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

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

然后你就可以真实地找到this按钮的叠加层了，像这样：

$(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。使用这种方法，您只需一小段代码即可处理所有绑定，更易于维护:)

【讨论】：