这两个jQuery函数可以组合成一个更高效的函数吗？

我在jQuery中有两个函数来隐藏然后显示标题，并且还交换了按钮，这样当标题被隐藏时，“显示标题”按钮就会出现，反之亦然。详情如下:

$('#close_header').click(function() {
    $('#header').animate({ top: '-=150px' }, 500);
    $(this).toggle();
    $('#open_header').toggle();
});

$('#open_header').click(function() {
    $('#header').animate({ top: '+=150px' }, 500);
    $(this).toggle();
    $('#close_header').toggle();
});

<img src="images/close.png" id="close_header" class="header_control fadein button">
<img src="images/open.png" id="open_header" class="header_control fadein button">
<div id="header">
    *Header content.*
</div>

要附带的标记如下所示：

$('#close_header').click(function() {
    $('#header').animate({ top: '-=150px' }, 500);
    $(this).toggle();
    $('#open_header').toggle();
});

$('#open_header').click(function() {
    $('#header').animate({ top: '+=150px' }, 500);
    $(this).toggle();
    $('#close_header').toggle();
});

<img src="images/close.png" id="close_header" class="header_control fadein button">
<img src="images/open.png" id="open_header" class="header_control fadein button">
<div id="header">
    *Header content.*
</div>

*标题内容*

---

为了整洁和高效，有没有办法将这两个功能合并为一个呢？

性能绝对没有差别

$('#open_header, #close_header').on('click', function(e) {
    var q = this.id=='open_header';
    $('#header').animate({ top: q?'+':'-'+'=150px' }, 500);
    $(this).toggle();
    $('#'+(q?'close':'open')+'_header').toggle();
});

如果您尝试在一个带有参数的函数中编写所有内容，那么它的可读性就会降低

保持这样，没关系

现在回答你的问题:

有没有办法把这两种功能结合起来

是

为了整洁和高效，有没有办法将这两个功能合并为一个

$('#open_header, #close_header').on('click', function(e) {
    var q = this.id=='open_header';
    $('#header').animate({ top: q?'+':'-'+'=150px' }, 500);
    $(this).toggle();
    $('#'+(q?'close':'open')+'_header').toggle();
});

---

否。阅读其他答案中的代码，它们是否更整洁？他们是否更有效率否

假设您只有这两个

。标头\u控件

s：

$('.header_control').click(function() {
    var dist = (this.id=="open_header") ? '+=150px' : '-=150px';
    $('#header').animate({top: dist}, 500);
    $('.header_control').toggle(); // both at once
});​

很难从您的代码示例中了解，但您甚至可以用一个简单的方法替换该

.animate（…）

方法：

---

---

将这些功能结合起来并不是更简单，效率也可以忽略不计。这是js，有时简洁胜过单一责任同意@Woot4Moo为

show（）

/

hide（）另外更改
toggle（）
如果合适，会更加明确。@Maess我觉得您可能无法处理“企业”级应用程序或编写分发给大型用户群的API。@NaOH定义的效率更高。更易于维护、更易于阅读或更快执行。在这种情况下，只有两个是重要的。这使得调试更容易。如何？@Woot4Moo“150px”仅在一个位置，对于初学者来说。$（this）.toggle（）和$（“#close_header”）.toggle（）应该更改为$（“.header_control”）。toggle（）将两个控件标记为1x。如果您总是运行$（“#close_header”），那么当close_header触发单击时，您将遇到问题。@Blazemonger这又一次使调试更容易了。如何？我们删除了一行代码，但是如果函数中的某些内容稍后中断，我们如何轻松地调试open vice close？使用最新的编辑，您无缘无故地执行了两次相同的检查+我更喜欢“干的”，但在这种情况下，即使是我也会把它们分开。现在，如果有很多这样的功能..@pst。如果有很多这样的功能，你仍然必须有很多的“如果”是这样的。。。我甚至会将这些函数分开。@gdoron如果有很多（读：超过2个）这样的函数对，我会[可能]写一个元函数，因为它会出现在我的“复制粘贴”雷达上。。但这是一个不同的用例，我同意这个答案。@Woot4Moo。我喜欢！有趣的是，几乎每次我遇到一个家伙问我关于工作中的“性能提升”的问题，我都会看到他们使用了很多更关键的慢代码……通常是如何工作的，我对把东西转换成O（n！）感到内疚但是我意识到我的方法是错误的有些人不喜欢三元运算符=p@gdoron至少这不是阿德内奥的答案：-）@pst呵呵，现在这个答案看起来和我的答案一样，所有的编辑都发生了，哈哈。@Woot4Moo。当需要三元运算符时，我可以使用它们。但是当你使用它们的时候，因为你可以。。。为了什么？在一个函数中编写所有代码。哇@gdoron帮助编译器/讽刺与我向其他人提出的问题相同，这如何使调试变得更容易？@Woot4Moo，原因如下。