blocks|key|1096247|text|您可以自己编写函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1096248|function+toggleIf(element,+condition)+{
++++if+(condition)+{+element.show();+}
++++else+{+element.hide();+}
}|code-block|syntax|javascript|1096249|然后像这样使用它：|1096250|toggleIf($("button"),+$("#agree").is(":checked")+&&+$("#name").val()+!=+"");|1096251|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You could write the function yourself.

<pre><code>function toggleIf(element, condition) {
 if (condition) { element.show(); }
 else { element.hide(); }
}
</code></pre>

Then use it like this:

<pre><code>toggleIf($("button"), $("#agree").is(":checked") &amp;&amp; $("#name").val() != "");
</code></pre>

blocks|key|1096311|text|首先，让我们看看我是否正确理解了您想要做的事情……您希望查看复选框的状态(选中或未选中)，并根据该值的状态隐藏或显示第二个div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1096312|定义此样式：|1096313|.noDisplay+{
++++display:none;
}|code-block|syntax|javascript|1096314|使用此JavaScript：|1096315|$("button").click(function()+{
++$("#mydiv").toggleClass("noDisplay",+$("#name").val()+==+"");
});|1096316|可以在以下位置找到来自jQuery的文档：http://api.jquery.com/toggleClass/|offset|length|1096317|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/toggleClass/^0|0|0|0|0|0|L|Y|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

First, lets see if I understand what you want to do correctly...
You want to look at the state of a checkbox(checked or not) and hide or show a second div based on the status of that value.

Define this style:

<pre><code>.noDisplay {
 display:none;
}
</code></pre>

Use this JavaScript:

<pre><code>$("button").click(function() {
 $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});
</code></pre>

The documentation from jQuery on it can be found here:
<a href="http://api.jquery.com/toggleClass/" rel="noreferrer">http://api.jquery.com/toggleClass/</a>

blocks|key|1096405|text|好吧，所以我是个笨蛋，在我问问题之前，我需要RTM。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1096406|jQuery.toggle()允许您开箱即用地执行此操作。|offset|length|1096407|$("button").click(function()+{
++var+condition+=+$("#agree").is(":checked")+&&+$("#name").val()+!=+""+);
++$("#mydiv").toggle(condition);
});|code-block|syntax|javascript|1096408|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/toggle/#toggle-display^0|0|0|F|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Ok, so I am an idiot and need to RTM before I ask questions.

<a href="http://api.jquery.com/toggle/#toggle-display" rel="noreferrer">jQuery.toggle()</a> allows you to do this out of the box.

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

blocks|key|1096492|text|如果toggle()对你不好(例如，因为它有动画效果)，你可以写一个小的jQuery插件，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1096493|$.fn.toggleIf+=+function(showOrHide)+{
++return+this.each(function()+{
++++if+(showOrHide)+{
++++++return+$(this).show();
++++}+else+{
++++++return+$(this).hide();
++++}
++});
};|code-block|syntax|javascript|1096494|然后像这样使用它：|1096495|$(element).toggleIf(condition);|1096496|entityMap^0|2|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

If <code>toggle()</code> is not good for you (e.g. because it animates), you can write a small jQuery plugin, like this:

<pre><code>$.fn.toggleIf = function(showOrHide) {
 return this.each(function() {
 if (showOrHide) {
 return $(this).show();
 } else {
 return $(this).hide();
 }
 });
};
</code></pre>

and then use it like this:

<pre><code>$(element).toggleIf(condition);
</code></pre>

blocks|key|1311674|text|语法4$(选择器).toggle(显示)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1311675|显示true+-显示元素。false+-隐藏元素。|1311676|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Syntax 4
$(selector).toggle(display)
display
true - to show the element.
false - to hide the element.

I write something similar to the following code a lot. It basically toggles an element based on some condition.

In the following made-up example, the condition is "If the <code>agree</code> checkbox is checked and the <code>name</code> field isn't empty".

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

I wish there was some sort of jQuery function that would work like this.

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

Is there something like this out there? Or are there other ways besides the first example to do this in a less <code>if-else-ish</code> way?

Does something like jQuery.toggle(boolean) exist?

jQuery

我经常编写类似以下代码的代码。它基本上是根据某些条件来切换元素。在下面这个虚构的例子中，条件是“如果agree复选框被选中并且name字段不为空”。$("button").click(function() {  if ($("#agree").is(":checked") && $("#name").val() != ...

问像jQuery.toggle(布尔值)这样的东西是否存在？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问像jQuery.toggle(布尔值)这样的东西是否存在？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问像jQuery.toggle(布尔值)这样的东西是否存在？
EN