Home > Web Front-end > JS Tutorial > The jQuery method concisely implements interlaced color changing and the use of toggleClass_jquery

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

WBOY
Release: 2016-05-16 17:40:30
Original
1270 people have browsed it

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:





alternate lines Color change


















;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>



source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
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