إضافة فئة hidden-xs عند تحديد صندوق الاختيار

عندما تكون لديك صندوق اختيار في لوحة التحكم في سايتكور، وترغب في إضافة فئة “hidden-xs” إلى div مخصص إذا تم تحديد الصندوق، يمكنك تحقيق ذلك باستخدام جافا سكريبت وجيكويري بطرق مختلفة.

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

javascriptCopy code
$(document).ready(function() {
    // انتظر حتى يتم تحميل الصفحة
    $('#checkboxID').change(function() {
        // استمع لتغييرات في الصندوق
        if($(this).is(":checked")) {
            // إذا تم تحديد الصندوق
            $('#targetDiv').addClass('hidden-xs');
            // أضف الفئة المطلوبة
        } else {
            // إذا تم إلغاء تحديد الصندوق
            $('#targetDiv').removeClass('hidden-xs');
            // أزل الفئة المطلوبة
        }
    });
});

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

htmlCopy code
<input type="checkbox" id="checkboxID">
<div id="targetDiv" class="customDiv">div>

javascriptCopy code
$(document).ready(function() {
    // انتظر حتى يتم تحميل الصفحة
    $('#checkboxID').change(function() {
        // استمع لتغييرات في الصندوق
        if($(this).is(":checked")) {
            // إذا تم تحديد الصندوق
            $('#targetDiv').addClass('hidden-xs');
            // أضف الفئة المطلوبة
        } else {
            // إذا تم إلغاء تحديد الصندوق
            $('#targetDiv').removeClass('hidden-xs');
            // أزل الفئة المطلوبة
        }
    });
});

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

بالطبع، إليك المزيد من المعلومات حول الطرق المختلفة لتحقيق الهدف المحدد:

1. استخدام append مع jQuery:
   في حالة استخدام append، يمكنك إنشاء العنصر المستهدف (div) بشكل ديناميكي باستخدام jQuery وثم إضافة الفئة “hidden-xs” إليه عندما يتم التحقق من حالة الصندوق. هذا النهج يتطلب استخدام append مباشرة ويبدو كالتالي:

   javascriptCopy code
   $(document).ready(function() {
       $('#checkboxID').change(function() {
           if($(this).is(":checked")) {
               // إنشاء div بالفئة hidden-xs وإضافته إلى body
               $('
   ').appendTo('body');
           } else {
               // إزالة div إذا تم إلغاء تحديد الصندوق
               $('.customDiv').remove();
           }
       });
   });
   

   يعمل هذا الكود على إنشاء عنصر div جديد بالفئة “hidden-xs” وإضافته إلى body عندما يتم تحديد الصندوق، ويزيل العنصر عند إلغاء تحديد الصندوق.

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

   htmlCopy code
   <input type="checkbox" id="checkboxID">
   <div id="targetDiv" class="customDiv">div>
   

   javascriptCopy code
   $(document).ready(function() {
       $('#checkboxID').change(function() {
           if($(this).is(":checked")) {
               // إذا تم تحديد الصندوق
               $('#targetDiv').addClass('hidden-xs');
           } else {
               // إذا تم إلغاء تحديد الصندوق
               $('#targetDiv').removeClass('hidden-xs');
           }
       });
   });
   

   هذا النهج يتضمن تحميل العنصر المستهدف مسبقًا في صفحتك وتعديل فئته بناءً على حالة الصندوق.

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