التابع .toggle() في jQuery
.toggle( handler, handler [, handler ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ربط معالجين أو أكثر بالعناصر المتطابقة، لتنفيذها بالتناوب.
.toggle( handler, handler [, handler ] )
أُضيف مع الإصدار: 1.0، وأٌهمل مع الإصدار: 1.8، واُُزيل مع الإصدار: 1.9.
handler
دالة على الشكل Function( Event eventObject )، تنفَّذ عند النقر على العنصر كل مرة زوجية.
handler
دالة على الشكل Function( Event eventObject )، تنفَّذ عند النقر على العنصر كل مرة فردية.
handler
دالة على الشكل Function( Event eventObject )، تعمل كمعالج إضافي للتبديل بينها بعد النقر.
ملاحظة مهمة: أهمل هذا الشكل للتابع مع الإصدار jQuery 1.8 وأزيل مع الإصدار jQuery 1.9. يوفر jQuery أيضًا تابع حركة يسمى .toggle() يبدل من حالة رؤية العناصر. تعتمد الحركة أو خاصية الحدث على مجموعة من الوسائط المُمررة.
يربط التابع .toggle() معالج بالحدث click، لذلك تنطبق القواعد الموضحة في عملية تشغيل click هنا أيضًا.
على سبيل المثال، تأمل شيفرة HTML هذه:
<div id="target">
انقر هنا
</div>
يمكن بعد ذلك ربط معالجات الأحداث بالعنصر <div>
$( "#target" ).toggle(function() {
alert( "المعالج الأول للتابع .toggle() المُستدعى." );
}, function() {
alert( "المعالج الثاني للتابع .toggle() المُستدعى.." );
});
عند النقر على العنصر بشكل متكرر، تتبدل الرسائل:
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
إذا اُدخِل أكثر من معالجين، سيبدل التابع .toggle() بينها. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا.
من السهل نسبيًا تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في .toggle() محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل .toggle() بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان .toggle() يستخدم معالج click داخليًا للقيام بعمله، فيجب فك ارتباط الحدث click لإزالة السلوك المرتبط بالتابع .toggle()، لكن ذلك سيؤثر أيضًا على معالجات الحدث click الأخرى. يستدعي التنفيذ أيضًا التابع .preventDefault() على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع.toggle() على العنصر.
أمثلة
تبديل نمط على خلايا الجدول (لا ينصح باستخدامه. استخدم التابع .toggleClass() بدلاً منه):
$( "td" ).toggle(
function() {
$( this ).addClass( "مُحدد" );
}, function() {
$( this ).removeClass( "مُحدد" );
}
);