لغة JavaScript - سلسلة دروس شرح مكتبة jQuery - شرح الدالة [ شرح الدالة change ] | زين العربية | XenArabia

لغة JavaScript سلسلة دروس شرح مكتبة jQuery - شرح الدالة [ شرح الدالة change ]

shqawe

راعي الطيب .. بعيد الهقاوي
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,342
مستوى التفاعل
1,100
النقاط
113
الإقامة
K.S.A
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نكمل اليوم ما بدأنها بدرس جديد فمن فاتته الدروس السابقة فيستطيع زيارة فهرس الدورة عن طريق هذا الرابط



بسم الله نبدأ:

درسنا اليوم يتحدث عن دالة change

وعمل هذه الدالة هي انها تقوم بعرض حدث ما عند تغيير حالة العنصر واكثر عملها على النماذج والحقول

طريقة كتابة الدالة بهذا الشكل:


JavaScript:
$(element).change(function() {
 
  });
بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق بــ element

ومن ثم نقوم بادراج الاحداث التي نريد عملها داخل اقواس الدالة

لنأخذ مثال لكي تتضح الصورة اكثر ونبسطها بشكل اكبر

فلنفرض ان لدينا نموذج تسجيل اعضاء ويحمل هذا النموذج حقلين اختيار من نوع checkbox تشير الى حالة العضو العائلية

الخيار الاول: اعزب
الخيار الثاني: متزوج

ونريد عندما يقوم العضو باختيار الخيار متزوج ان تظهر له رسالة تسأله عن عدد الابناء وعند اختياره الخيار أعزب تختفي هذه الرسالة

سوف يكون كود html بهذا الشكل


HTML:
<label class="btn btn-primary ">
                    متزوج
                    <input type="radio" name="show_change_msg" id="show_change_msg" >
                </label>
                <label class="btn btn-primary active">
                    أعزب
                    <input type="radio" name="show_change_msg" id="hide_change_msg" >
                </label>

<div id="container" style="display: none;">
                    <h3>
                        كم عدد الابناء
                    </h3>
                </div>

وكود ال jquery بهذا الشكل


JavaScript:
$(function() {
    $('#show_change_msg').change(function() {
        $('#container').slideDown("3000");
    });
    $('#hide_change_msg').change(function() {
        $('#container').hide("3000");
    });

});
لنشرح الكود قمنا اولا ً باسناد العنصر الخاص بخيار المتزوج الى الدالة change والذي يحمل اسم show_change_msg

ثم قمنا باستخدام دالة slideDown والتي قمنا بشرحها في الدروس السابقة لكي تقوم باظهار رسالة كم عدد الابناء

ومن ثم قمنا باستخدام الدالة مرة أخرى بنفس الطريقة لاخفاء الرسالة عند اختيار الخيار أعزب وكما تلاحظون قمنا هنا باستخدام الدالة hide والتي سبق شرحها في الدروس السابقة

ولرؤية مثال يمكنكم زيارة هذا الرابط


اضغط هنا للذهاب للمثال

وفي النهاية اتمنى ان يكون الدرس واضح واي استفسار حاضرين للغالين

ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ

وتقبلوا احترامي وتقديري
اخوكم
شقاوي
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

إحصائيات المنتدى

المواضيع
902
المشاركات
8,337
الأعضاء
346
آخر عضو مسجل
ماجدخلف
أعلى