Skip to content

toggleClass: Document deprecation of a signature #860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

toggleClass: Document deprecation of a signature #860

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 90 additions & 84 deletions entries/toggleClass.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,80 @@
<?xml version="1.0"?>
<entry type="method" name="toggleClass" return="jQuery">
<title>.toggleClass()</title>
<signature>
<added>1.0</added>
<argument name="className" type="String">
<desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
</signature>
<signature>
<added>1.3</added>
<argument name="className" type="String">
<desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
<argument name="state" type="Boolean">
<desc>A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<argument name="state" type="Boolean" />
<return type="String" />
<desc>A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
</argument>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.</desc>
<longdesc>
<p>This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply <code>.toggleClass()</code> to a simple <code>&lt;div&gt;</code>: </p>
<pre><code>
<entries>
<entry type="method" name="toggleClass" return="jQuery">
<title>.toggleClass()</title>
<signature>
<added>1.0</added>
<argument name="className" type="String">
<desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
</signature>
<signature>
<added>1.3</added>
<argument name="className" type="String">
<desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
<argument name="state" type="Boolean">
<desc>A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<argument name="state" type="Boolean" />
<return type="String" />
<desc>A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
</argument>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.</desc>
<longdesc>
<p>This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply <code>.toggleClass()</code> to a simple <code>&lt;div&gt;</code>: </p>
<pre><code>
&lt;div class="tumble"&gt;Some text.&lt;/div&gt;
</code></pre>
<p>The first time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, we get the following:</p>
<pre><code>
</code></pre>
<p>The first time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, we get the following:</p>
<pre><code>
&lt;div class="tumble bounce"&gt;Some text.&lt;/div&gt;
</code></pre>
<p>The second time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, the <code>&lt;div&gt;</code> class is returned to the single <code>tumble</code> value:</p>
<pre><code>&lt;div class="tumble"&gt;Some text.&lt;/div&gt;</code></pre>
<p>Applying <code>.toggleClass( "bounce spin" )</code> to the same <code>&lt;div&gt;</code> alternates between <code>&lt;div class="tumble bounce spin"&gt;</code> and <code>&lt;div class="tumble"&gt;</code>.</p>
<p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
<pre><code>
</code></pre>
<p>The second time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, the <code>&lt;div&gt;</code> class is returned to the single <code>tumble</code> value:</p>
<pre><code>&lt;div class="tumble"&gt;Some text.&lt;/div&gt;</code></pre>
<p>Applying <code>.toggleClass( "bounce spin" )</code> to the same <code>&lt;div&gt;</code> alternates between <code>&lt;div class="tumble bounce spin"&gt;</code> and <code>&lt;div class="tumble"&gt;</code>.</p>
<p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
<pre><code>
$( "#foo" ).toggleClass( className, addOrRemove );
</code></pre>
<p>is equivalent to:</p>
<pre><code>
</code></pre>
<p>is equivalent to:</p>
<pre><code>
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
</code></pre>
<p><strong>As of jQuery 1.4</strong>, if no arguments are passed to <code>.toggleClass()</code>, all class names on the element the first time <code>.toggleClass()</code> is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.</p>
<pre><code>
</code></pre>
<p><strong>As of jQuery 1.4</strong>, if no arguments are passed to <code>.toggleClass()</code>, all class names on the element the first time <code>.toggleClass()</code> is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.</p>
<pre><code>
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});
</code></pre>
<p>This example will toggle the <code>happy</code> class for <code>&lt;div class="foo"&gt;</code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
</longdesc>
<example>
<desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
<code><![CDATA[
</code></pre>
<p>This example will toggle the <code>happy</code> class for <code>&lt;div class="foo"&gt;</code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
</longdesc>
<example>
<desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
<code><![CDATA[
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
]]></code>
<css><![CDATA[
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
Expand All @@ -93,16 +88,16 @@ $( "p" ).click(function() {
background: yellow;
}
]]></css>
<html><![CDATA[
<html><![CDATA[
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
]]></html>
</example>
<example>
<desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
<code><![CDATA[
</example>
<example>
<desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
<code><![CDATA[
var count = 0;
$( "p" ).each(function() {
var $thisParagraph = $( this );
Expand All @@ -114,7 +109,7 @@ $( "p" ).each(function() {
});
});
]]></code>
<css><![CDATA[
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
Expand All @@ -128,17 +123,16 @@ $( "p" ).each(function() {
background: red;
}
]]></css>
<html><![CDATA[
<html><![CDATA[
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
]]></html>
</example>
<example>
<desc>Toggle the class name(s) indicated on the buttons for each div.
</desc>
<css><![CDATA[
</example>
<example>
<desc>Toggle the class name(s) indicated on the buttons for each div.</desc>
<css><![CDATA[
.wrap > div {
float: left;
width: 100px;
Expand All @@ -156,7 +150,7 @@ $( "p" ).each(function() {
background-color: cornsilk;
}
]]></css>
<html><![CDATA[
<html><![CDATA[
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
Expand All @@ -171,7 +165,7 @@ $( "p" ).each(function() {
<div class="a c"></div>
</div>
]]></html>
<code><![CDATA[
<code><![CDATA[
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
Expand All @@ -196,11 +190,23 @@ $( "a" ).on( "click", function( event ) {
appendClass();
});
]]></code>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.3"/>
<category slug="version/1.4"/>
</entry>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.3"/>
<category slug="version/1.4"/>
</entry>
<entry type="method" name="toggleClass" return="jQuery" deprecated="3.0">
<signature>
<added>1.4</added>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<longdesc>
<div class="warning"><strong>This signature (only!) is deprecated as of jQuery 3.0</strong>.</div>
</longdesc>
</entry>
</entries>