عرض مصدر jQuery/toggleClass

<noinclude>{{DISPLAYTITLE:التابع <code>.toggleClass()‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎.toggleClass( className )‎</code> ==
=== القيمة المعادة ===
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].
=== الوصف ===
إضافة أو إزالة صنف واحد أو أكثر من كل عنصر من مجموعة العناصر المُطابقة، اعتمادًا على وجود الصنف أو قيمة وسيط الحالة.

=== <code>‎.toggleClass( className )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].

==== <code>className</code> ====
اسم أو أكثر من أسماء الأصناف (مفصولة بمسافات) والمراد تبديلها لكل عنصر في المجموعة المطابقة، وهو من النوع [[JavaScript/String|String]].

=== <code>‎.toggleClass( className, state )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.3 1.3].

==== <code>className</code> ====
اسم أو أكثر من أسماء الأصناف (مفصولة بمسافات) والمراد تبديلها لكل عنصر في المجموعة المطابقة، وهو من النوع [[JavaScript/String|String]].

==== <code>state</code> ====
قيمة منطقية من النوع [[JavaScript/Boolean|Boolean]] (وليست قيمة تحوّل إلى true أو false) لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.

=== <code>‎.toggleClass( function [, state ] )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4].

==== <code>function</code> ====
دالة على الشكل [[JavaScript/Function|Function]]( Integer index, [[JavaScript/String|String]] className, [[JavaScript/Boolean|Boolean]] state ) => [[JavaScript/String|String]].

وهي تُعيد أسماء الأصناف لتبديلها في خاصية class لكل عنصر من عناصر المجموعة المطابقة. ويحتاج إدخال كلاً من موضع فهرس العنصر في المجموعة، وقيمة الصنف القديمة، والحالة كوسائط.

==== <code>state</code> ====
قيمة منطقية  من النوع [[JavaScript/Boolean|Boolean]] لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.

يحتاج هذا التابع واحدًا أو أكثر من أسماء الأصناف كمعاملٍ له. في الإصدار الأول، إذا كان هناك عنصر في مجموعة العناصر المطابقة يحتوي بالفعل على الصنف، فإنه سيُزال؛ وإذا كان العنصر لا يحتوي على الصنف، فسيُضاف. على سبيل المثال، يمكننا تطبيق ‎<code>.toggleClass()</code>‎ على عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> بسيط:<syntaxhighlight lang="html">
<div class="tumble">بعض النصوص.</div>
</syntaxhighlight><span> </span>في المرة الأولى التي نطبق فيها ‎<code>$( "div.tumble" ).toggleClass( "bounce" )</code>‎، نحصل على ما يلي:<syntaxhighlight lang="html">
<div class="tumble bounce">بعض النصوص.</div>
</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>
</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()</code>‎ المعاملَ الثاني لتحديد ما إذا كان يجب إضافة الصنف أو إزالته. إذا كانت قيمة هذا المعامل <code>true</code>، فسيُضاف الصنف؛ أما إذا كان <code>false</code> فسيُزال الصنف. في جوهرها، تكون الشيفرة البرمجية:<syntaxhighlight lang="jquery">
$( "#foo" ).toggleClass( className, addOrRemove );
</syntaxhighlight>مكافئة للشيفرة:<syntaxhighlight lang="jquery">
if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
</syntaxhighlight><div><div class="tumble bounce spin"><div class="tumble">
بدءًا من jQuery [http://api.jquery.com/category/version/1.4 1.4]، إذا لم يمرر أي وسيط إلى ‎<code>.toggleClass()</code>‎ تُبدل كل أسماء الأصناف على العنصر الذي طُبِّق عليه ‎<code>.‎toggleClass()</code>‎ في المرة الأولى. كذلك بدءًا من jQuery [http://api.jquery.com/category/version/1.4 1.4]، يمكن تحديد اسم الصنف المراد تبديله بتمريره داخل الدالة.<syntaxhighlight lang="jquery">
$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});
</syntaxhighlight>سيعمل هذا المثال على تبديل الفئة <code>happy</code> لعناصر <code><nowiki><div class="foo"‎></nowiki></code> إذا كان عنصرها الرئيسي يحتوي على فئة <code>bar</code>، خلاف ذلك، فإنه سيتبدل إلى الصنف <code>sad</code>.<div class="foo">
=== أمثلة ===
تبديل الصنف <code>"highlight"</code> الفئة عند النقر فوق فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>أضف الصنف <code>"highlight"</code> إلى الفقرة <code>[[HTML/div|<nowiki><p></nowiki>]]</code> التي يُنقر عليها عند كل ثالث نقرة من تلك الفقرة، و إزالته عند كل نقرة أولى وثانية:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>تبديل اسم (أو أسماء) الصنف المشار إليه على الأزرار لكل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

== <code>‎.toggleClass( [state ] )‎</code> ==

=== القيمة المعادة ===
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].

اٌُهمل مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0].
=== <code>‎.toggleClass( [state ] )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4].
==== <code>state</code> ====
قيمة منطقية  من النوع [[JavaScript/Boolean|Boolean]] لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.
== مصادر ==
* [http://api.jquery.com/toggleClass/ صفحة التابع ‎ ‎.toggleClass()‎‎‎في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Manipulation]]