The jQuery method concisely implements interlaced color changing and the use of toggleClass_jquery

Today, a simple method toggleClass() is used to implement interlaced color changing: the code is as follows:

Copy the code The code is as follows:

;td align="center">
















/table>


<script> <br><br> <br><br>The first more complicated method <br>: <br> </div> <br><strong></strong>Copy code<br><div class="codetitle"> <span> The code is as follows:<a style="CURSOR: pointer" data="28205" class="copybut" id="copybut28205" onclick="doCopy('code28205')"><u> </u>$(function() </a>{ </span>$ ("#table tr").hover(function() </div>{ <div class="codebody" id="code28205">$(this).addClass("h"); <br>},function() <br>{ <br>$(this ).removeClass("h"); <br>}) <br>$("input").click(function() <br>{ <br>if($(this).attr("checked")) <br>{ <br>$(this).closest("tr").addClass("c"); <br>} <br>else <br>{ <br>$(this).closest("tr ").removeClass("c"); <br>} <br>}) <br>}) <br><br> <br><br>The second simpler method <br>: <br> toggleClass() Toggles the setting or removal of one or more classes for selected elements. </div>This method checks the specified class in each element. Adds the class if it does not exist, or removes it if it is set. This is called a toggle effect. <br>However, by using the "switch" parameter, you can specify that only classes be removed or only added. <strong></strong><br><br><br>Copy code<br><div class="codetitle"> <span> The code is as follows:<a style="CURSOR: pointer" data="6178" class="copybut" id="copybut6178" onclick="doCopy('code6178')"><u> </u>$(function(){ </a>$(" #table tr").hover(function(){ </span>$(this).toggleClass("h"); </div>}) <div class="codebody" id="code6178">$("input").click(function(){ <br>var d = $(this); <br>d.closest('tr').toggleClass("c",d.attr("checked")) ; <br>}) <br>}) <br> </script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery's deferred object to load JS files asynchronously and sequentially_jqueryNext article：Use jQuery's deferred object to load JS files asynchronously and sequentially_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

	Blue Maple Front End	Blue Maple Front End< /td>
	Blue maple front end	Blue maple front end
	Blue maple front end	Blue maple front end	Blue maple front end	Blue maple front end
< input type="checkbox" name="checkbox" class="check1" value="checkbox" />	Blue maple front end
	Blue maple front end	Blue maple front end
	Blue maple front end	Blue maple front end