是否存在类似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-ish方式做到这一点吗？

Answer 1

好吧,所以我是个白痴,在我提问之前需要RTM.

jQuery.toggle()允许您开箱即用.

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

Answer 2

首先,让我们看看我是否理解你想要做的正确...你想看一个复选框的状态(选中或不选中),并根据该值的状态隐藏或显示第二个div.

定义这种风格:

.noDisplay {
    display:none;
}

使用此JavaScript:

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

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

Answer 3

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

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

然后像这样使用它:

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