الفرق بين المراجعتين لصفحة: «jQuery/toggleClass»
< jQuery
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 19: | سطر 19: | ||
==== <code>state</code> ==== | ==== <code>state</code> ==== | ||
قيمة منطقية من النوع [[JavaScript/Boolean|Boolean]] ( | قيمة منطقية من النوع [[JavaScript/Boolean|Boolean]] (وليست قيمة تحوّل إلى true أو false) لتحديد ما إذا كان يجب إضافة الصنف أو إزالته. | ||
=== <code>.toggleClass( function [, state ] )</code> === | === <code>.toggleClass( function [, state ] )</code> === | ||
| سطر 25: | سطر 25: | ||
==== <code>function</code> ==== | ==== <code>function</code> ==== | ||
دالة على الشكل [[JavaScript/Function|Function]]( Integer index, [[JavaScript/String|String]] className, [[JavaScript/Boolean|Boolean]] state ) => [[JavaScript/String|String]] | دالة على الشكل [[JavaScript/Function|Function]]( Integer index, [[JavaScript/String|String]] className, [[JavaScript/Boolean|Boolean]] state ) => [[JavaScript/String|String]]. | ||
وهي تُعيد أسماء الأصناف لتبديلها في خاصية class لكل عنصر من عناصر المجموعة المطابقة. ويحتاج إدخال كلاً من موضع فهرس العنصر في المجموعة، وقيمة الصنف القديمة، والحالة كوسائط. | وهي تُعيد أسماء الأصناف لتبديلها في خاصية class لكل عنصر من عناصر المجموعة المطابقة. ويحتاج إدخال كلاً من موضع فهرس العنصر في المجموعة، وقيمة الصنف القديمة، والحالة كوسائط. | ||
| سطر 34: | سطر 34: | ||
يحتاج هذا التابع واحدًا أو أكثر من أسماء الأصناف كمعاملٍ له. في الإصدار الأول، إذا كان هناك عنصر في مجموعة العناصر المطابقة يحتوي بالفعل على الصنف، فإنه سيُزال؛ وإذا كان العنصر لا يحتوي على الصنف، فسيُضاف. على سبيل المثال، يمكننا تطبيق <code>.toggleClass()</code> على عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> بسيط:<syntaxhighlight lang="html"> | يحتاج هذا التابع واحدًا أو أكثر من أسماء الأصناف كمعاملٍ له. في الإصدار الأول، إذا كان هناك عنصر في مجموعة العناصر المطابقة يحتوي بالفعل على الصنف، فإنه سيُزال؛ وإذا كان العنصر لا يحتوي على الصنف، فسيُضاف. على سبيل المثال، يمكننا تطبيق <code>.toggleClass()</code> على عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> بسيط:<syntaxhighlight lang="html"> | ||
<div class="tumble">بعض النصوص.</div> | <div class="tumble">بعض النصوص.</div> | ||
</syntaxhighlight><span> </span> | </syntaxhighlight><span> </span>في المرة الأولى التي نطبق فيها <code>$( "div.tumble" ).toggleClass( "bounce" )</code>، نحصل على ما يلي:<syntaxhighlight lang="html"> | ||
في المرة الأولى التي نطبق فيها <code>$( "div.tumble" ).toggleClass( "bounce" )</code>، نحصل على ما يلي:<syntaxhighlight lang="html"> | |||
<div class="tumble bounce">بعض النصوص.</div> | <div class="tumble bounce">بعض النصوص.</div> | ||
</syntaxhighlight>في المرة الثانية التي نقوم فيها بتطبيق <code>$( "div.tumble" ).toggleClass( "bounce" )</code>، | </syntaxhighlight>في المرة الثانية التي نقوم فيها بتطبيق <code>$( "div.tumble" ).toggleClass( "bounce" )</code>، ستصبح قيمة الخاصية <code>class</code> في العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مساويةً إلى <code>tumble</code>:<syntaxhighlight lang="html"> | ||
<div class="tumble">بعض النصوص.</div> | <div class="tumble">بعض النصوص.</div> | ||
</syntaxhighlight><div> | </syntaxhighlight><div> | ||
تطبيق <code>.toggleClass( "bounce spin" )</code> على نفس عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> يبدل ما بين <code><nowiki><div class="tumble bounce spin"></nowiki></code> و <code><nowiki><div class="tumble"></nowiki></code>. | تطبيق <code>.toggleClass( "bounce spin" )</code> على نفس عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> يبدل ما بين <code><nowiki><div class="tumble bounce spin"></nowiki></code> و <code><nowiki><div class="tumble"></nowiki></code>. | ||
يستخدم الإصدارُ الثاني من <code>.toggleClass()</code> المعاملَ الثاني لتحديد ما إذا كان يجب إضافة الصنف أو إزالته. إذا كانت قيمة هذا المعامل <code>true</code>، فسيُضاف الصنف؛ أما إذا كان <code>false</code> فسيُزال الصنف. في جوهرها، تكون الشيفرة البرمجية:<syntaxhighlight lang="jquery"> | يستخدم الإصدارُ الثاني من <code>.toggleClass()</code> المعاملَ الثاني لتحديد ما إذا كان يجب إضافة الصنف أو إزالته. إذا كانت قيمة هذا المعامل <code>true</code>، فسيُضاف الصنف؛ أما إذا كان <code>false</code> فسيُزال الصنف. في جوهرها، تكون الشيفرة البرمجية:<syntaxhighlight lang="jquery"> | ||
| سطر 59: | سطر 58: | ||
} | } | ||
}); | }); | ||
</syntaxhighlight>سيعمل هذا المثال على تبديل الفئة <code>happy</code> لعناصر <code><nowiki><div class="foo"></nowiki></code> إذا كان عنصرها الرئيسي يحتوي على فئة <code>bar</code>، خلاف ذلك، فإنه سيتبدل إلى الصنف <code>sad</code>.<div class="foo"> | </syntaxhighlight>سيعمل هذا المثال على تبديل الفئة <code>happy</code> لعناصر <code><nowiki><div class="foo"></nowiki></code> إذا كان عنصرها الرئيسي يحتوي على فئة <code>bar</code>، خلاف ذلك، فإنه سيتبدل إلى الصنف <code>sad</code>.<div class="foo"> | ||
=== أمثلة === | === أمثلة === | ||
تبديل الصنف "highlight" الفئة عند النقر فوق فقرة | تبديل الصنف <code>"highlight"</code> الفئة عند النقر فوق فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 98: | سطر 97: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>أضف الصنف "highlight" إلى الفقرة التي يُنقر عليها عند كل ثالث نقرة من تلك الفقرة، و إزالته عند كل نقرة أولى وثانية | </syntaxhighlight>أضف الصنف <code>"highlight"</code> إلى الفقرة <code>[[HTML/div|<nowiki><p></nowiki>]]</code> التي يُنقر عليها عند كل ثالث نقرة من تلك الفقرة، و إزالته عند كل نقرة أولى وثانية:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 142: | سطر 141: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تبديل اسم (أو أسماء) الصنف المشار إليه على الأزرار لكل عنصر div | </syntaxhighlight>تبديل اسم (أو أسماء) الصنف المشار إليه على الأزرار لكل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 218: | سطر 217: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | ||
اٌُهمل مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0]. | اٌُهمل مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0]. | ||
=== <code>.toggleClass( [state ] )</code> === | === <code>.toggleClass( [state ] )</code> === | ||
مراجعة 13:58، 11 يونيو 2018
.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 );
}
بدءًا من jQuery 1.4، إذا لم يمرر أي وسيط إلى سيعمل هذا المثال على تبديل الفئة
أضف الصنف تبديل اسم (أو أسماء) الصنف المشار إليه على الأزرار لكل عنصر
.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 لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.