اذهب إلى المحتوى

السؤال

نشر (معدل)

لدي العديد من الصور التي أجلبها عن طريق حلقات التكرار على لغة 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

Recommended Posts

  • 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 التي تمكننا من الوصول إلى الوسم المعني.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...