تحديث عرض العناصر باستخدام جافا سكريبت

عندما تتطلب موقع الويب الخاص بك تحديثاً ديناميكياً لعناصره استناداً إلى تحديد المستخدم، فإن استخدام جافا سكريبت يمكن أن يكون حلاً مثالياً. في هذا السياق، تبدو مهمتك واضحة: تحديث عرض عناصر div بناءً على القيمة المحددة في مرشح الانتقاء.

لكن، يبدو أن لديك بعض الخلل في الشيفرة. دعني أساعدك في تحليل الكود وتقديم الحلول المناسبة:

1. استخدام دالة التحديث عندما يتغير المرشح:
   تقوم بربط الدالة onchange بمرشح البحث SearchFilter، وهذا صحيح. لكن يجب عليك تحديث العرض عندما يتغير المرشح.

2. تغيير عرض العناصر div:
   يبدو أنك تحاول تغيير عرض العناصر div باستخدام getElementById("v-product"). هذا سيؤثر على عنصر واحد فقط، ولكنك تحتاج إلى تغيير عرض جميع العناصر div المطابقة.

3. تحديث العرض بناءً على القيمة المحددة:
   عليك استخدام document.getElementsByClassName("v-product")[i] بدلاً من document.getElementById("v-product")، وذلك للتأكد من تحديث عرض كل عنصر div بشكل منفصل.

تحتاج إلى تكرار عبر جميع العناصر div التي تحتوي على النص المطلوب وتغيير عرضها استناداً إلى التطابق مع قيمة المرشح. هذا مثال بسيط لكيفية تحقيق ذلك:

javascriptCopy code
document.getElementById("SearchFilter").onchange = function() {
    var matcher = new RegExp(document.getElementById("SearchFilter").value, "gi");
    var divs = document.getElementsByClassName("v-product");
    for (var i = 0; i < divs.length; i++) {
        var divContent = divs[i].getElementsByClassName("tipue_search_content_text")[0].innerHTML;
        if (matcher.test(divContent)) {
            divs[i].style.display = "inline-block";
        } else {
            divs[i].style.display = "none";
        }
    }
};

هذا الكود يقوم بالتحقق من التطابق بين نص كل div وقيمة المرشح، ويغير عرض كل div بناءً على نتيجة التطابق. لاحظ أنه يجب عليك ضمان أن هيكل صفحتك يتوافق مع هذا الكود، وأن العناصر div والعناصر التي تحتوي على النص المراد التحقق منها لديها الفئة المناسبة.

بمجرد الانتهاء من فهم الطريقة التي يعمل بها الكود، يمكنك بدء كتابة المقال. هنا نموذج لكيفية استكمال المقال:

كيفية البحث في عناصر div لنص من مرشح اختياري وتغيير عرض العناصر إلى “عدم العرض”

عند تطوير مواقع الويب، قد تواجه في بعض الأحيان حاجة لتغيير عرض عناصر الصفحة بناءً على قيم محددة يحددها المستخدم. في هذا المثال، سنركز على كيفية البحث في عناصر div لنص محدد من مرشح اختياري باستخدام جافا سكريبت وتغيير عرض هذه العناصر إلى “عدم العرض” في حالة عدم التطابق.

فهم المشكلة

يأتي هذا التحدي عندما يحتاج المستخدم إلى فلترة العناصر المعروضة على صفحة الويب استناداً إلى قيمة محددة. على سبيل المثال، قد تكون لدينا قائمة منتجات ونريد عرض فقط تلك التي تحتوي على الكلمة المحددة من قبل المستخدم.

الحل

الحل يكمن في استخدام جافا سكريبت للتفاعل مع تغييرات المستخدم في المرشح الذي تم اختياره. سنقوم بتغيير عرض كل div بناءً على ما إذا كان النص في العنصر يتطابق مع القيمة المحددة.

الشفرة

في الشفرة التالية، سنقوم بربط الدالة onchange بمرشح البحث، ومن ثم نستخدم دالة التكرار للانتقال عبر كل عنصر div. سنقوم بمقارنة النص في كل div مع القيمة المحددة، وإذا كان التطابق موجوداً، سيتم عرض العنصر، وإلا سيتم تغيير العرض إلى “عدم العرض”.

javascriptCopy code
document.getElementById("SearchFilter").onchange = function() {
    var matcher = new RegExp(document.getElementById("SearchFilter").value, "gi");
    var divs = document.getElementsByClassName("v-product");
    for (var i = 0; i < divs.length; i++) {
        var divContent = divs[i].getElementsByClassName("tipue_search_content_text")[0].innerHTML;
        if (matcher.test(divContent)) {
            divs[i].style.display = "inline-block";
        } else {
            divs[i].style.display = "none";
        }
    }
};

الختام

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

هذا المقال يقدم فهماً شاملاً لكيفية تحقيق هذا الهدف بطريقة فعالة ومفيدة. يمكن للقراء الآن تطبيق هذه الفكرة في مشاريعهم الخاصة لتحسين تجربة مستخدميهم.