类似jQuery.toggle(boolean)的东西存在吗？

Question

我经常编写类似以下代码的内容。它基本上是根据某些条件切换元素。

在下面这个虚构的示例中，条件是“如果选中了agree复选框且name字段不为空”。

$("button").click(function() {
  if ($("#agree").is(":checked") && $("#name").val() != "" ) {
    $("#mydiv").show();
  } else {
    $("#mydiv").hide();
  }
});

我希望有一种类似于这样的jQuery函数可以工作。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

是否有类似的东西存在？或者除了第一个示例以外，还有没有其他以更少的if-else方式实现它的方法？

- jessegavin

Answer 1

好的，所以我很蠢，在提问之前需要先查看文档。

jQuery.toggle()可以直接帮你实现这个功能。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

- jessegavin

---

你知道有没有支持缓动/淡入淡出/滑动过渡的这个函数的版本吗？这个特定的方法似乎不支持，它使得我的页面跳得非常快，这比一个温和的滑动对用户更加困惑。 - Drew Noakes

是的，它是在jQuery版本1.4.3中添加的。查看文档页面（http://api.jquery.com/toggle/#toggle2），您会发现有三种调用toggle()的方法，您想使用以下方式：.toggle（[duration]，[easing]，[callback]） - jessegavin

据我所知，你无法同时传递布尔值和持续时间/缓动等参数。但我很乐意在这方面接受纠正。 - Galaxy

我同意RTFM的观点，但是在这种情况下，名称“toggle”并不是你能想到要查找的东西。 - Alexis Wilke

这太棒了。在jQuery的文档中甚至没有找到这个。还有一点，.toggleClass也是这样工作的。例如：.toggleClass('class-name', condition); - Ashish Kumar

Answer 2

首先，让我们确认一下我是否正确理解您想要做的事情...

您想查看复选框的状态（已选或未选），并根据该值的状态隐藏或显示第二个div。

请定义以下样式：

.noDisplay {
    display:none;
}

请使用此JavaScript代码：

$("button").click(function() {
  $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});

jQuery相关文档可以在此处找到： http://api.jquery.com/toggleClass/

- Richard June

Answer 3

你可以自己编写这个函数。

function toggleIf(element, condition) {
    if (condition) { element.show(); }
    else { element.hide(); }
}

然后像这样使用它：

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");

- John Fisher

Answer 4

语法 4 $(选择器).toggle(显示)

显示 true - 显示元素。 false - 隐藏元素。

- John

Answer 5

如果`toggle()`不适合您（例如因为它会产生动画效果），您可以编写一个小的jQuery插件，如下所示：

$.fn.toggleIf = function(showOrHide) {
  return this.each(function() {
    if (showOrHide) {
      return $(this).show();
    } else {
      return $(this).hide();
    }
  });
};

然后像这样使用它：

$(element).toggleIf(condition);

- Yossi Shasho

---

只有在将持续时间作为参数传递时，$.toggle()函数才会进行动画处理。如果传递布尔值参数，则不会进行动画处理。因此，像这样的插件是多余的。请参见：http://jsfiddle.net/qvdsu/ - jessegavin