如果语句没有重复选择器？

Question

用这个简单的例子......

if ($('.target').is(':hidden')) {
    $('.target').show();
}  else {
    $('.target').hide();
}

我很好奇是否可以优化，可能是这样的：

if ($('.target').is(':hidden')) {
   .show();
} else {
   .hide();
}

或$（this）..

if ($('.target').is(':hidden')) {
   $(this).show();
} else {
   $(this).hide();
}

---

不一定与这个我知道可以使用切换的示例严格相关..这只是我想要用作示例的最简单的if / else示例。

Answer 1

当然，有一个变量

var element = $('.target');

if (element.is(':hidden')) {
    element.show();
}  else {
    element.hide();
}

和jQuery有一个漂亮的toggle()方法做同样的事情

$('.target').toggle();

走向深渊，你也可以做这样的事情

(function(el) {
    el[el.is(':hidden')?'show':'hide']();
})($('.target'));

以及其他一些方式

Answer 2

这些都不适合你。您必须先将目标另存为变量。

var $target = $('.target');
if ($target.is(':hidden')) {
  $target.show();
} else {
  $target.hide();
}

如果你真的想把事情做坏，试试这个：

var $target = $('.target');
$target[$target.is(':hidden') ? 'show' : 'hide']();

但实际上，只需使用toggle jQuery方法。

$('.target').toggle();

Answer 3

在您的示例中，您只是在显示和隐藏元素之间切换。 JQuery有一个方法。它只是叫.toggle（）--- http://api.jquery.com/toggle/

所以，如果你只是试图展示和隐藏你可以说的东西

$('.target').toggle();

或者，如果涉及更多逻辑，那么缓存jQuery变量是有利的，因为每次在$中包装选择器时，都会重新包装该元素或重新遍历DOM。

所以：

var target =  $('.target');
if(target.is(':hidden')) {
   target.show();
} else {
   target.hide();
}