像jQuery.toggle（布尔）存在吗？

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

在下面的组装示例中，条件是“如果agreecheckbox被选中并且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); }); 

有没有这样的东西呢？ 或者除了第一个例子之外，还有其他的方法可以用更lessif-else-ish方法来实现吗？

Answer 1

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

jQuery.toggle（）可以让你做这个开箱即用。

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

Answer 2

首先，让我们看看我是否理解你想要做的事情…你想看一下checkbox的状态（选中或不选），并根据该值的状态隐藏或显示第二个div。

定义这种风格：

 .noDisplay { display:none; } 

使用这个JavaScript：

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

jQuery上的文档可以在这里find： 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() != ""); 

Answer 4

如果toggle()不适合你（例如，因为它animation），你可以写一个小的jQuery插件，如下所示：

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

然后像这样使用它：

 $(element).toggleIf(condition);