像 jQuery.toggle(boolean) 这样的东西存在吗？答案

【问题标题】：Does something like jQuery.toggle(boolean) exist?像 jQuery.toggle(boolean) 这样的东西存在吗？
【发布时间】：2011-01-24 05:23:14
【问题描述】：

我写了很多类似下面的代码。它基本上根据某些条件切换元素。

在下面的虚构示例中，条件是“如果选中了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-ish 方式执行此操作吗？

【问题讨论】：

标签： javascript jquery toggle

【解决方案1】：

你可以自己写函数。

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

然后像这样使用它：

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

【讨论】：

【解决方案2】：

首先，让我们看看我是否理解您想要正确执行的操作... 您想查看复选框的状态（选中或未选中）并根据该值的状态隐藏或显示第二个 div。

定义这种风格：

.noDisplay {
    display:none;
}

使用这个 JavaScript：

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

可以在这里找到来自 jQuery 的文档： http://api.jquery.com/toggleClass/

【讨论】：

【解决方案3】：

好的，所以我是个白痴，在我提问之前需要 RTM。

jQuery.toggle() 允许您开箱即用地执行此操作。

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

【讨论】：

你知道这个函数的一个版本支持缓动/淡入淡出/滑动过渡吗？这种特殊的方法似乎没有，它使我的页面跳转得相当快，这种方式比柔和的幻灯片更让用户感到困惑。
是的，它是在 jQuery 版本 1.4.3 中添加的。查看文档页面 (api.jquery.com/toggle/#toggle2) 你会看到调用 toggle() 的方法有以下三种： .toggle( [ duration ], [ easing ], [ callback ] )
AFAIK 你不能传递一个布尔值和一个持续时间/缓动等等。不过我很乐意纠正。
我同意 RTFM，只是名称，toggle，只是在这种情况下你不能想到要寻找的东西。
描述toggle(boolean)的条目实际上是这样的：api.jquery.com/toggle/#toggle-setShown

【解决方案4】：

如果toggle() 不适合你（例如因为它动画），你可以写一个小的 jQuery 插件，像这样：

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

然后像这样使用它：

$(element).toggleIf(condition);

【讨论】：

$.toggle() 函数仅在您将持续时间值作为参数传递时才会产生动画。如果你传递一个布尔参数，它会 not 动画。所以像这样的插件是多余的。见这里：jsfiddle.net/qvdsu

【解决方案5】：

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

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

【讨论】：