يتم استخدام طريقة jQuery toggleCLass() لإضافة أو إزالة فئة واحدة أو أكثر من العناصر المحددة. تقوم هذه الطريقة بالتبديل بين إضافة وإزالة اسم فئة واحد أو أكثر. يقوم بالتحقق من كل عنصر لأسماء الفئات المحددة. إذا تم تعيين اسم الفئة بالفعل، فسيتم إزالته وإذا كان اسم الفئة مفقودًا، فسيتم إضافته.
بهذه الطريقة، فإنه يخلق تأثير التبديل. كما أنه يسهل عليك تحديد الإضافة أو الإزالة فقط عن طريق استخدام معلمة التبديل.
بناء الجملة :
$(selector).toggleClass(classname,function(index,currentclass),switch)
معلمات طريقة jQuery toggleClass()
| معامل | وصف | ||
|---|---|---|---|
| اسم الفئة | إنها معلمة إلزامية. يحدد اسم فئة واحدًا أو أكثر لإضافته أو إزالته. إذا كنت تستخدم عدة فئات، فافصل بينها بمسافة. | ||
| الدالة (الفهرس، الفئة الحالية) | إنها معلمة اختيارية. يحدد واحدًا أو أكثر من أسماء الفئات التي تريد إضافتها أو إزالتها.| فِهرِس: | يوفر موضع الفهرس للعنصر في المجموعة.الفئة الحالية: | يوفر اسم الفئة الحالية للعنصر المحدد. |
| يُحوّل | وهي أيضًا معلمة اختيارية. إنها قيمة منطقية تحدد ما إذا كان يجب إضافة الفئة (صحيح) أو إزالتها (خطأ). |
مثال على طريقة 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(); }); اختبره الآن