تبديل رمز الزائد والناقص في JavaScript

عندما نلقي نظرة على الشيفرة التي قدمتها، يبدو أن المشكلة تكمن في الطريقة التي يتم فيها تحديد عنصر القائمة الذي تم النقر عليه وتغيير الرمز الخاص به. في الواقع، تستخدم الشيفرة $('#cool') لتحديد العنصر الذي يحمل الهوية (ID) “cool”، وهو السبب في أن التبديل يحدث فقط لأول عنصر.

لحل هذه المشكلة وجعل التبديل يحدث لكل عنصر من العناصر، يجب علينا تحديد الأعمدة (العناصر) بشكل فردي. يمكن القيام بذلك باستخدام محدد CSS لتحديد عناصر القائمة بدقة وتطبيق الدالة toggleClass() عليها بشكل منفصل.

لذا، يمكن تعديل الشيفرة الجافا سكريبت كالتالي:

javascriptCopy code
$('.sidebar_menu').click(function(){
    $(this).find('i').toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
});

هنا، قمنا بتغيير $('#cool') إلى $('.sidebar_menu')، وهذا يحدد جميع عناصر القائمة بدلاً من عنصر واحد فقط. بعد ذلك، عند النقر على أي عنصر من القائمة، سيتم تبديل فئات الرمز داخل هذا العنصر بشكل مستقل، مما يسمح بتحديث الرموز لجميع عناصر القائمة بشكل صحيح.

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

في الشيفرة التي قدمتها، يتم استخدام حلقة foreach في PHP لإنشاء قائمة من الفئات. لكل فئة، يتم إنشاء عنصر في القائمة يحتوي على اسم الفئة وعنصر للتحكم في عرض المزيد/القليل من المحتوى.

عند النقر على عنصر التحكم، يتم تشغيل دالة JavaScript لتغيير الرمز المستخدم (المرمز الرمزي) بين “glyphicon-plus” و “glyphicon-minus” باستخدام دالة toggleClass().

المشكلة التي تم التحديث لها في الرد السابق هي أن الشيفرة الأصلية تستخدم محدد CSS لاستهداف عنصر واحد فقط (ID “cool”)، مما يعني أن العملية تحدث فقط لهذا العنصر. بتغيير المحدد إلى .sidebar_menu، يتم استهداف جميع عناصر القائمة بدلاً من عنصر واحد، مما يجعل عملية التبديل تطبق على جميع العناصر كما هو المطلوب.

عندما يتم النقر على أي عنصر من عناصر القائمة، يتم تغيير الفئة (أو الكلاس) من “glyphicon-plus” إلى “glyphicon-minus” أو العكس بناءً على حالة الرمز الحالية باستخدام toggleClass()، مما يسمح بالتبديل بين الرموز بسهولة دون الحاجة إلى تحديد عنصر واحد بشكل منفصل.