كيفية إظهار و إخفاء عنصر؟

Omer Amad · 13 أغسطس

كيفكم يا أصدقاء... لديه هذا الكود بدي يختفي لما يتم اختيار ذكر.... ولما يتم اختيار أنثى بدي يختفي.... اسم عامود الجنس هو Y1


        <img src="<?php echo $imagePath; ?>" alt="Profile Picture" style="width: 100px;"><br>
        <input type="file" name="new_image" accept="image/*"><br>

Chihab Hedidi · 13 أغسطس

يمكنك استخدام JavaScript لإخفاء أو إظهار الكود بناء على اختيار الجنس، حيث إذا كنت ترغب في إخفاء عنصر بناء على اختيار "ذكر" أو "أنثى" يمكنك استخدام كود مشابه للتالي و غيره على حسب مشروعك:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gender Based Display</title>
    <script>
        function updateVisibility() {
            var gender = document.getElementById('gender').value;
            var imgContainer = document.getElementById('profilePicContainer');

            if (gender === 'male') {
                imgContainer.style.display = 'none'; // إخفاء الصورة إذا كان الاختيار ذكر
            } else {
                imgContainer.style.display = 'block'; // إظهار الصورة إذا كان الاختيار أنثى
            }
        }
    </script>
</head>
<body>
    <select id="gender" onchange="updateVisibility()">
        <option value="male">ذكر</option>
        <option value="female">أنثى</option>
    </select>

    <div id="profilePicContainer">
        <img src="<?php echo $imagePath; ?>" alt="Profile Picture" style="width: 100px;">
    </div>
</body>
</html>

حيث نستخدم عنصر <select> لاختيار الجنس، عندما يختار المستخدم "ذكر"، سيتم إخفاء العنصر الذي يحتوي على الصورة، وعندما يختار "أنثى"، سيتم إظهار العنصر، و تأكد من تعديل <?php echo $imagePath; ?> ليشير إلى المسار الصحيح للصورة.

Omer Amad · 13 أغسطس

بتاريخ 9 دقائق مضت قال Chihab Hedidi:
يمكنك استخدام JavaScript لإخفاء أو إظهار الكود بناء على اختيار الجنس، حيث إذا كنت ترغب في إخفاء عنصر بناء على اختيار "ذكر" أو "أنثى" يمكنك استخدام كود مشابه للتالي و غيره على حسب مشروعك:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gender Based Display</title>
    <script>
        function updateVisibility() {
            var gender = document.getElementById('gender').value;
            var imgContainer = document.getElementById('profilePicContainer');

            if (gender === 'male') {
                imgContainer.style.display = 'none'; // إخفاء الصورة إذا كان الاختيار ذكر
            } else {
                imgContainer.style.display = 'block'; // إظهار الصورة إذا كان الاختيار أنثى
            }
        }
    </script>
</head>
<body>
    <select id="gender" onchange="updateVisibility()">
        <option value="male">ذكر</option>
        <option value="female">أنثى</option>
    </select>

    <div id="profilePicContainer">
        <img src="<?php echo $imagePath; ?>" alt="Profile Picture" style="width: 100px;">
    </div>
</body>
</html>
حيث نستخدم عنصر <select> لاختيار الجنس، عندما يختار المستخدم "ذكر"، سيتم إخفاء العنصر الذي يحتوي على الصورة، وعندما يختار "أنثى"، سيتم إظهار العنصر، و تأكد من تعديل <?php echo $imagePath; ?> ليشير إلى المسار الصحيح للصورة.

هذا الكود لم يعمل في صفحة تعديل بيانات؟

Chihab Hedidi · 13 أغسطس

بتاريخ 2 دقائق مضت قال Omer Amad:

هذا الكود لم يعمل في صفحة تعديل بيانات؟

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

كيفية إظهار و إخفاء عنصر؟

السؤال

Omer Amad

3 أجوبة على هذا السؤال

Recommended Posts

Chihab Hedidi

Omer Amad

Chihab Hedidi

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية