التابع ‎.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 );
}
بدءًا من 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 لتحديد ما إذا كان يجب إضافة الصنف أو إزالته.

مصادر