שיטת jQuery toggleCLass() משמשת להוספה או הסרה של מחלקה אחת או יותר מהאלמנטים שנבחרו. שיטה זו עוברת בין הוספה והסרה של שם מחלקה אחד או יותר. זה בודק כל רכיב עבור שמות המחלקות שצוינו. אם שם הכיתה כבר מוגדר, הוא מוסר ואם שם הכיתה חסר, הוא מוסיף.
בדרך זו, זה יוצר את אפקט החלפת המצב. זה גם מאפשר לך לציין להוסיף או להסיר רק באמצעות פרמטר מתג.
תחביר :
$(selector).toggleClass(classname,function(index,currentclass),switch)
פרמטרים של שיטת jQuery toggleClass()
| פָּרָמֶטֶר | תיאור | ||
|---|---|---|---|
| שם הכיתה | זה פרמטר חובה. זה מציין שם מחלקה אחד או יותר להוספה או הסרה. אם אתה משתמש במספר מחלקות, הפרד ביניהן ברווח. | ||
| פונקציה (אינדקס, מחלקה נוכחית) | זה פרמטר אופציונלי. הוא מציין שם מחלקה אחד או יותר שברצונך להוסיף או להסיר.| אינדקס: | הוא מספק את מיקום האינדקס של האלמנט בסט.מחלקה נוכחית: | הוא מספק את שם המחלקה הנוכחי של האלמנט שנבחר. |
| החלף | זה גם פרמטר אופציונלי. זהו ערך בוליאני שמציין אם יש להוסיף את המחלקה (true) או להסיר (false). |
דוגמה לשיטת jQuery toggleClass()
ניקח דוגמה כדי להדגים את ההשפעה של שיטת jQuery toggleClass() .
$(document).ready(function(){ $('button').click(function(){ $('p').toggleClass('main'); }); }); .main { font-size: 150%; color: red; } Toggle class 'main' for p elements <p>Hello! javatpoint.com</p> <p>This is popular tutorial website.</p> <p> <b>Note:</b> Click repeatedly on the button to see the toggle effect.</p> בדוק את זה עכשיו jQuery toggleClass() דוגמה 2
toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } <p>www.javatpoint.com</p> <p>Java Tutorial</p> <p>SQL Tutorial</p> <p>Android Tutorial</p> <p>HTML Tutorial</p> <p>etc.</p> $( 'p' ).click(function() { $( this ).toggleClass( 'highlight' ); }); בדוק את זה עכשיו jQuery toggleClass() דוגמה 3
toggleClass demo .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; } toggle toggle a toggle a b toggle a b c <a href="#">Reset</a> var cls = [ '', 'a', 'a b', 'a b c' ]; var divs = $( 'div.wrap' ).children(); var appendClass = function() { divs.append(function() 'none' ) + ' '; ); }; appendClass(); $( 'button' ).on( 'click', function() undefined; divs.toggleClass( tc ); appendClass(); ); $( 'a' ).on( 'click', function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); }); בדוק את זה עכשיו