是否存在类似jQuery.toggle（boolean）的东西？

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

在下面的伪造示例中，条件为“如果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方式做到这一点？

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

jQuery.toggle（）允许您立即执行此操作。

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

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

定义此样式：

.noDisplay {
    display:none;
}

使用此JavaScript：

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

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

您可以自己编写函数。

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

然后像这样使用它：

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

如果toggle()对您不利（例如因为动画），则可以编写一个小的jQuery插件，如下所示：

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

然后像这样使用它：

$(element).toggleIf(condition);