الفرق بين المراجعتين لصفحة: «jQuery/toggle event»
Khaled-yassin (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.toggle()</code> في jQuery}}</noinclude> == <code>.toggle( ha...' |
Khaled-yassin (نقاش | مساهمات) ط الجزء ذو السطر التحتي يحتاج مراجعة |
||
| سطر 43: | سطر 43: | ||
</syntaxhighlight>إذا اُدخِل أكثر من معالجين، سيبدل التابع <code>.toggle()</code> بينهم. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا. | </syntaxhighlight>إذا اُدخِل أكثر من معالجين، سيبدل التابع <code>.toggle()</code> بينهم. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا. | ||
يوفر التابع <code>.toggle()</code> الراحة. من السهل نسبياً تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في <code>.toggle()</code> محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل <code>.toggle()</code> بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. | يوفر التابع <code>.toggle()</code> الراحة. من السهل نسبياً تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في <code>.toggle()</code> محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل <code>.toggle()</code> بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان <code>.toggle()</code> يستخدم معالج <code>click</code> داخليًا للقيام بعمله، <u>فيجب فك ارتباط <code>click</code> لإزالة أحد التصرفات المرفقة بالتابع <code>.toggle()</code>، بحيث يمكن التقاط معالجات <code>click</code> الأخرى في الاستدعاءات الأخرى</u>. يستدعي التنفيذ أيضًا التابع <code>[[jQuery/preventDefault|.preventDefault()]]</code> على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع<code>.toggle()</code> على العنصر. | ||
=== أمثلة === | === أمثلة === | ||
مراجعة 00:24، 7 يونيو 2018
.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() بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان .toggle() يستخدم معالج click داخليًا للقيام بعمله، فيجب فك ارتباط click لإزالة أحد التصرفات المرفقة بالتابع .toggle()، بحيث يمكن التقاط معالجات click الأخرى في الاستدعاءات الأخرى. يستدعي التنفيذ أيضًا التابع .preventDefault() على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع.toggle() على العنصر.
أمثلة
تبديل نمط على خلايا الجدول. (لا ينصح باستخدامه. استخدم .toggleClass() بدلاً منه):
$( "td" ).toggle(
function() {
$( this ).addClass( "مُحدد" );
}, function() {
$( this ).removeClass( "مُحدد" );
}
);