• 0

كيف أجعل الصورة تستجيب عند الضغط عليها عن طريق Jquery؟

لدي العديد من الصور التي أجلبها عن طريق حلقات التكرار على لغة php، بهذا الشكل:

<?php
    foreach($accountsArray as &$acc) {
        echo ('
            <!--<div class="col-md-2 col-sm-6">-->
                <img class="img-thumbnail account-img" src="https://twitter.com/'.$acc['screen_name'].'/profile_image?size=original" alt="Profile Image" id="img-'.$acc['screen_name'].'" />
            <!--</div>-->
        ');
    }
?>

أي أن وسم الصور سيكون على هذا النحو:

<img class="img-thumbnail account-img" src="https://twitter.com/BBCNews/profile_image?size=original" alt="Profile Image" id="img-BBCNews" />

 

وأريد عن طريق مكتبة Jquery أن أضيف تأثير عند الضغط على الصورة:

$('.account-img').each(function() {
    var id = $(this).attr('id').split('-');
    var name = id[1];
    $(this).on('click', function() {
        alert(name);
    });
});

وقد اضطررت لكتابة تنبيه alert حتى أحصل على استجابة، وأرى موضع الخطأ، لكن دون جدوى، فكيف اتمكن من فعل ذلك بشكل صحيح؟

تمّ تعديل بواسطة Simoh

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

في الكود الخاص بـ Jquery وَجب عليك استعمال الحدث click عِوضَ :

$(this).on('click', function() {}

كما أن استعمال this هنا لا أجد له دلالة، لعدم ضرورة ذلك، فمن الأفضل استعمال ".account-img" مباشرة، إليك الطريقة الصحيحة لكتابة كود Jquery الخاصة بالضغط على الصورة:

$('.account-img').click(function(){
   alert($(this).attr("id"));
});

- في المثال التالي، نبرز كيفية عمل حدث الضغط فوق عنصر عن طريق Jquery:

$("p").click(function(){
    alert("أكاديمية حسوب ترحب بكم");
});

=> بعد الضغط على قطعة النص p سيظهر التنبيه " أكاديمية حسوب ترحب بكم ".

وتعتمد هذه التقنية على :

$(selector).click()

 Selector هو id الوسم أو class التي تمكننا من الوصول إلى الوسم المعني.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن