Java Script

ليش الامر الاول يتم تنفيذه لكن الكونسول لا تطبع

if (document.querySelector("body > i").classList.contains("fa-bars-staggered")) {


    document.querySelector("body > i").addEventListener('click', () => {
        document.querySelector("body > i").classList.remove("fa-bars-staggered")
        document.querySelector("body > i").classList.add("fa-close");
        // document.querySelector(".sidebar").classList.add("active");
    })


} else if (document.querySelector("body > i").classList.contains("fa-close")) {


    document.querySelector("body > i").addEventListener('click', () => {
        console.log("ls");
    })


}

 document.querySelector("body > i").addEventListener('click', () => {
        document.querySelector("body > i").classList.remove("fa-bars-staggered")
        document.querySelector("body > i").classList.add("fa-close");
        // document.querySelector(".sidebar").classList.add("active");
    })

وهو لا يحتوي على كونسول لكى يتم تنفيذه

وبما انه تم تنفيذ ما بداخل الشرط الأول فلا يتم الدخول الى الشرط التانى else if

لا يتم الدخول الى الشرط التانى وتنفيذ ما بداخله الى الا فى حالة الشرط الأول لم يتحقق

وتم تحقق الشرط الثانى

بعد ذلك عند عمل click على

 document.querySelector("body > i")

يتم اضافة class

fa-close

اذن ن تم تحقق الشرط الثانى ويتم تنفيذ ما بداخلها ولكن لا بد من عمل click لكى يتم طباعة ما بداخل الكونسول

عبدالباسط ابراهيم

2024-01-28T11:16:19+00:00
المزيد
- رابط مختصر

أعتقد السبب هو أن الامر الأول يتم تنفيذه عند تحميل الصفحة أول مرة، حيث أن عند تحميل الصفحة للمرة الأولى يكون صنف العنصر body>i هو fa-bars-staggered.

أما الامر الثاني فلا يتم تنفيذه لأن شرطه لا يتحقق عند تحميل الصفحة أول مرة. يتم تنفيذه فقط عندما يتغير صنف العنصر ليصبح fa-close عند الضغط عليه مرة واحدة.

فالكونسول لن تطبع شيئا عند تحميل الصفحة لأن الامر الثاني لا يتم تنفيذه حينها.

لذا لا يوجد مشكلة. الامران يتم تنفيذهما في الوقت المناسب حسب الشرط المحدد في كل منهما.

Mustafa Suleiman

2024-01-28T11:41:24+00:00
المزيد
- رابط مختصر

حاليًا كتبت الشرط الأول أن يتم تنفيذه في حال كان عنصر i يحتوي على كلاس fa-bars-staggered ويتم إضافة EventListener من أجل حذف الكلاس وإضافة كلاس باسم fa-close.

وذلك يحدث في المرة الأولى عند تحميل الصفحة، وفي كل مرة تقوم بإعادة تحديث الصفحة.

وبالتالي الجزء الخاص بـ else if لا يتم تنفيذه،

والكود الصحيح هو من خلال استخدام ميثود toggle كالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>Toggle Icon Example</title>
    <style>
        /* Add your styles here */
    </style>
</head>
<body>
    <i class="fas fa-bars-staggered" id="toggleIcon"></i>


    <script>
        // Your JavaScript code here
        const toggleIcon = document.getElementById("toggleIcon");


        toggleIcon.addEventListener('click', () => {
            toggleIcon.classList.toggle("fa-bars-staggered");
            toggleIcon.classList.toggle("fa-close");


            // يمكنك إضافة المزيد من السلوك هنا
            if (toggleIcon.classList.contains("fa-bars-staggered")) {
                console.log("التصريف عندما يكون العنصر يحتوي على الفئة 'fa-bars-staggered'");
            } else {
                console.log("التصريف عندما يكون العنصر يحتوي على الفئة 'fa-close'");
            }
        });
    </script>
</body>
</html>

تطوير الويب

مجتمع خاص بمناقشة وطرح المواضيع والقضايا العامة المتعلقة بتطوير الويب ولغاتها المختلفة

88.7 ألف متابع

Java Script

التعليقات

اقرأ أيضًا

تطوير الويب