1

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");
    })


}
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
mostafa_m

الأمر سيتم كالتالى عند تحميل الصفحة سيدخل على شرط ال 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

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

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

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

 document.querySelector("body > i")

يتم اضافة class

fa-close

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

0
Abdelbaset_ibrahem

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

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

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

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

0
Mustafa_Suleiman

حاليًا كتبت الشرط الأول أن يتم تنفيذه في حال كان عنصر 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>