التابع .toggleClass() في jQuery
.toggleClass( className )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
إضافة أو إزالة صنف واحد أو أكثر من كل عنصر من مجموعة العناصر المُطابقة، اعتمادًا على وجود الصنف أو قيمة وسيط الحالة.
.toggleClass( className )
أُضيف مع الإصدار: 1.0.
className
اسم أو أكثر من أسماء الأصناف (مفصولة بمسافات) والمراد تبديلها لكل عنصر في المجموعة المطابقة، وهو من النوع String.
.toggleClass( className, state )
أُضيف مع الإصدار: 1.3.
className
اسم أو أكثر من أسماء الأصناف (مفصولة بمسافات) والمراد تبديلها لكل عنصر في المجموعة المطابقة، وهو من النوع String.
state
قيمة منطقية من النوع Boolean (وليست قيمة تحوّل إلى true أو false) لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.
.toggleClass( function [, state ] )
أُضيف مع الإصدار: 1.4.
function
دالة على الشكل Function( Integer index, String className, Boolean state ) => String.
وهي تُعيد أسماء الأصناف لتبديلها في خاصية class لكل عنصر من عناصر المجموعة المطابقة. ويحتاج إدخال كلاً من موضع فهرس العنصر في المجموعة، وقيمة الصنف القديمة، والحالة كوسائط.
state
قيمة منطقية من النوع Boolean لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.
يحتاج هذا التابع واحدًا أو أكثر من أسماء الأصناف كمعاملٍ له. في الإصدار الأول، إذا كان هناك عنصر في مجموعة العناصر المطابقة يحتوي بالفعل على الصنف، فإنه سيُزال؛ وإذا كان العنصر لا يحتوي على الصنف، فسيُضاف. على سبيل المثال، يمكننا تطبيق .toggleClass() على عنصر <div> بسيط:
<div class="tumble">بعض النصوص.</div>
في المرة الأولى التي نطبق فيها $( "div.tumble" ).toggleClass( "bounce" )، نحصل على ما يلي:
<div class="tumble bounce">بعض النصوص.</div>
في المرة الثانية التي نقوم فيها بتطبيق $( "div.tumble" ).toggleClass( "bounce" )، ستصبح قيمة الخاصية class في العنصر <div> مساويةً إلى tumble:
<div class="tumble">بعض النصوص.</div>
تطبيق .toggleClass( "bounce spin" ) على نفس عنصر <div> يبدل ما بين <div class="tumble bounce spin"> و <div class="tumble">.
.toggleClass() المعاملَ الثاني لتحديد ما إذا كان يجب إضافة الصنف أو إزالته. إذا كانت قيمة هذا المعامل true، فسيُضاف الصنف؛ أما إذا كان false فسيُزال الصنف. في جوهرها، تكون الشيفرة البرمجية:$( "#foo" ).toggleClass( className, addOrRemove );
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
.toggleClass() تُبدل كل أسماء الأصناف على العنصر الذي طُبِّق عليه .toggleClass() في المرة الأولى. كذلك بدءًا من jQuery 1.4، يمكن تحديد اسم الصنف المراد تبديله بتمريره داخل الدالة.$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});
happy لعناصر <div class="foo"> إذا كان عنصرها الرئيسي يحتوي على فئة bar، خلاف ذلك، فإنه سيتبدل إلى الصنف sad.أمثلة
تبديل الصنف"highlight" الفئة عند النقر فوق فقرة <p>:<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass مثال على التابع</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue">انقر لتبديل الحالة</p>
<p class="blue highlight">إبراز</p>
<p class="blue">هذه</p>
<p class="blue">الفقرة</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>
"highlight" إلى الفقرة <p> التي يُنقر عليها عند كل ثالث نقرة من تلك الفقرة، و إزالته عند كل نقرة أولى وثانية:<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass مثال على التابع</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue">انقر لتبديل الحالة (<span>clicks: 0</span>)</p>
<p class="blue highlight">إبراز (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>عدد النقرات: 0</span>)</p>
<p class="blue">paragraphs (<span>عدد النقرات: 0</span>)</p>
<script>
var count = 0;
$( "p" ).each(function() {
var $thisParagraph = $( this );
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.find( "span" ).text( "clicks: " + count );
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
});
});
</script>
</body>
</html>
<div>:<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass مثال على التابع</title>
<style>
.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;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="buttons">
<button>تبديل</button>
<button class="a">تبديل a</button>
<button class="a b">تبديل a b</button>
<button class="a b c">تبديل a b c</button>
<a href="#">إعادة الحالة الأولى</a>
</div>
<div class="wrap">
<div></div>
<div class="b"></div>
<div class="a b"></div>
<div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
divs.append(function() {
return "<div>" + ( this.className || "لا شيء" ) + "</div>";
});
};
appendClass();
$( "button" ).on( "click", function() {
var tc = this.className || undefined;
divs.toggleClass( tc );
appendClass();
});
$( "a" ).on( "click", function( event ) {
event.preventDefault();
divs.empty().each(function( i ) {
this.className = cls[ i ];
});
appendClass();
});
</script>
</body>
</html>
.toggleClass( [state ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
اٌُهمل مع الإصدار: 3.0.
.toggleClass( [state ] )
أُضيف مع الإصدار: 1.4.
state
قيمة منطقية من النوع Boolean لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.