مسئله

ما به راهی نیاز داریم تا تمام چک مارک های درون یک مجموعه از چک باکس ها را تغییر وضعیت دهیم. هر چک باکس باید مستقل از دیگر چک باکس ها تغییر وضعیت داده شود.

راه حل

یک پلاگین به نام .toggleCheck() بنویسید که مانند متد .toggle() و .toggleClass() در هسته ی جی کوئری کار کند تا به ما کمک کند تا یک چک باکس یا یک گروه از چک باکس ها را تنظیم(set) کنیم یا پاک(clear) کنیم یا تغییر وضعیت(toggle) دهیم:

// چک کردن یا از چک بیرون آوردن هر عنصر چک باکس در این آبجکت جی کوئری
// از قلم انداخته شود check تغییر وضعیت دادن حالت چک شده هر چک باکس اگر
jQuery.fn.toggleCheck = function( check ) {
return this.toggleAttr( 'checked', true, false, check );
};

 اکنون می توانیم یک گروه از دکمه ها را فعال کنیم:

$('.toggleme').toggleCheck( true );

یا می توانیم آنها را غیرفعال کنیم:

$('.toggleme').toggleCheck( false );

یا می توانیم تمام آنها را تغییر وضعیت دهیم، به طوری که هرکدام، مستقل از بقیه باشد:

$('.toggleme').toggleCheck();

متد .toggleCheck() از یک متد عمومی تر به نام .toggleAttr() ساخته شده است که برای هر خصوصیت(attribute) کار می کند:

// For each element selected in this jQuery object,
// set the attribute 'name' to either 'onValue' or 'offValue'
// depending on the value of 'on. If 'on' is omitted,
// toggle the attribute of each element independently
// between 'onValue' and 'offValue'.
// If the selected value (either 'onValue' or 'offValue') is
// null or undefined, remove the attribute.
jQuery.fn.toggleAttr = function( name, onValue, offValue, on ) {
  function set( $element, on ) {
    var value = on ? onValue : offValue;
    return value == null ?
    $element.removeAttr( name ) :
    $element.attr( name, value );
  }
  return on !== undefined ?
    set( this, on ) :
    this.each( function( i, element ) {
      var $element = $(element);
      set( $element, $element.attr(name) !== onValue );
    });
};

 چرا باید خود را به زحمت بیاندازیم تا یک چیزِ همه منظوره مثل این را ایجاد کنیم؟ چون اکنون ما می توانیم از چنین تغییر وضعیت دهنده هایی، تقریباً بدون هیچ تلاشی برای دیگر خصوصیت ها نیز استفاده کنیم. فرض کنید که می خواهیم همین کار را برای متد .toggleCheck() انجام دهیم، اما این بار می خواهیم عناصر  <input> را فعال یا غیرفعال کنیم. ما می توانیم در یک خط، متد .toggleEnable() را ایجاد کنیم:

// Enable or disable every input element selected in this jQuery object.
// Toggle the enable state of each one if enable is omitted.
jQuery.fn.toggleEnable = function( enable ) {
return this.toggleAttr( 'disabled', false, true, enable );
};

در کدهای دو سطح بالاتر، توجه کنید که چگونه پارامترهای  onValue و offValue به ما امکان می دهند تا بین مقادیرِ خصوصیتِ true و false جا به جا شویم؛ و کار را ساده تر کرده ایم و  به فعال بودن(on) به جای غیرفعال بودن(off) در کدها پرداخته ایم.

بعنوان یک مثال دیگر، فرض کنید نیاز داریم تا یک خصوصیت به نام foo را تغییر وضعیت(toggle) دهیم به طوری که حالت on در آن، این است که مقدار این خصوصیت برابر با "bar" باشد (یعنی foo="bar" ) و حالت off در آن این است که این خصوصیت  حذف شود.

//  foo="bar" اضافه یا حذف خصوصیت
// از قلم انداخته شود وضعیت حضور این خصوصیت تغییر داده شود add اگر 
jQuery.fn.toggleFoo = function( add ) {
return this.toggleAttr( 'foo', 'bar', null, add );
};

توضیحات کدها

اگر تنها چیزی که واقعاً نیاز داشتیم این بود که چک باکس‌ها را تغییر دهیم، می‌توانیم همه چیز را به این شکل کدنویسی کنیم:

jQuery.fn.toggleCheck = function( on ) {
  return on !== undefined ?
    this.attr( 'checked', on ) :
    this.each( function( i, element ) {
      var $element = $(element);
      $element.attr( 'checked', ! $element.attr('checked') );
     });
};

این کد نسبت به متد .toggleAttr() کمی ساده تر است، اما تنها برای خصوصیت checked کار می کند، نه چیز دیگر. اگر بعداً به متد .toggleEnable() نیاز پیدا کردیم، باید چه کار کنیم؟ تنها کافیست تمام کدها را کپی کنیم و تعدادی از نام ها را تغییر دهیم. هرچه بیشتر بر روی متد .toggleAttr() کار کنیم، انعطاف پذیری بیشتری به ما می دهد.

 نکته: قبل از اینکه متدهای جدید سودمندی مانند این بنویسید، به مستندات ورژن جی کوئری خود مراجعه کنید. زیرا همواره امکان دارد چنین متدهایی در آینده به نسخه های جی کوئری اضافه شوند که باعث می شود نگران اینکه خودتان این کدها را بنویسید نباشید.

• قبلی