إظهار و إخفاء العناصر ضمن صفحة الويب باستخدام جافاسكربت

ليان أبو شعر · 10 ديسمبر 2021

لما بضغط على الزر يلي موجود في ال div المرقمة برقم واحد بيفتح الجدول تبعها في الdiv التانيةة وانا بدي اياه يفتح بنفس ال div كيف ممكن ؟

تم التعديل في 10 ديسمبر 2021 بواسطة Wael Aljamal
توضيح السؤال

Wael Aljamal · 10 ديسمبر 2021

بتاريخ 19 دقائق مضت قال ليان أبو شعر:

https://drive.google.com/drive/folders/1NJLB-RVzenymNk6N8VkFhHZgM_RRJWtC?usp=sharingسم ال file المراد عليه التعديل هو ddd

قمت بتعديل الشيفرة،

ال id يجب أن يكون مميز للعنصر نفسه وغير مكرر،
أضفت صنف autoHide لإخفاء الجداول بشكل تلقائي،
تمرير رقم العنصر للدوال show + hide لتحديد ماذا نعرض و ماذا نخفي،
حذف أجزاء مكررة من الشيفرة و التأكد من إغلاق الوسوم بشكل صحيح،

أرجو المراجعة للتعديلات وفهم الآلية.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap"
      rel="stylesheet"
    />
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script
      src="https://kit.fontawesome.com/597cb1f685.js"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../css/sty.css" />

    <title>Document</title>
  </head>
  <style>
    .autoHide {
      display: none;
    }
  </style>

  <body>
    <div class="services">
      <div class="service">
        <img src="../img/qq.jfif" width="100px" height="400px" />
        <h2 class="service-title">Rodney Cooper</h2>

        <button id="show" onclick="show(1)">More Detailes</button>
        <div id="container1" class="autoHide">
          <table border="1px">
            <thead>
              <tr>
                <th><img src="../img/222.png" height="20PX" width="20PX" /></th>
                <th>Doctor name</th>
                <th>Dr. Maram Taher</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <center>
                    <img src="../img/111.png" height="20PX" width="20PX" />
                  </center>
                </td>
                <td>
                  <center>Work Time</center>
                </td>
                <td>Mon to friday -- 07.00 AM to 10.00 PM</td>
              </tr>
            </tbody>
            <tbody>
              <tr>
                <td>
                  <center>
                    <img src="../img/333.png" height="20PX" width="20PX" />
                  </center>
                </td>
                <td>
                  <center>Treatment fee</center>
                </td>
                <td>
                  <center>10$</center>
                </td>
              </tr>
            </tbody>
          </table>
          <button onclick="hide(1)">Less Detailes</button>
          <button>Book A Session</button>
        </div>

        <br />
        <img src="//i.picsum.photos/id/380/400/250.jpg" alt="" />
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-linkedin"></i>
        <i class="fab fa-twitter-square"></i>
      </div>

      <div class="d">
        <div class="dd">
          <img src="../img/qq.jfif" width="400px" height="400px" />
          <h2 class="ddd-title">Rodney Cooper</h2>

          <button id="show" onclick="show(2)">More Detailes</button>
          <div id="container2" class="autoHide">
            <table border="1px">
              <thead>
                <tr>
                  <th>
                    <img src="../img/222.png" height="20PX" width="20PX" />
                  </th>
                  <th>Doctor name</th>
                  <th>Dr. Maram Taher</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <center>
                      <img src="../img/111.png" height="20PX" width="20PX" />
                    </center>
                  </td>
                  <td>
                    <center>Work Time</center>
                  </td>
                  <td>Mon to friday -- 07.00 AM to 10.00 PM</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td>
                    <center>
                      <img src="../img/333.png" height="20PX" width="20PX" />
                    </center>
                  </td>
                  <td>
                    <center>Treatment fee</center>
                  </td>
                  <td>
                    <center>10$</center>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="hide(2)">Less Detailes</button>
            <button>Book A Session</button>
          </div>
          <script>
            function show(id) {
              x = document.getElementById("container" + id);
              b = document.getElementById("show" + id);
              x.style.display = "block";
              b.style.display = "none";
            }
            function hide(id) {
              x = document.getElementById("container" + id);
              b = document.getElementById("show" + id);
              x.style.display = "none";
              b.style.display = "block";
            }
          </script>
          <br />
          <img src="//i.picsum.photos/id/380/400/250.jpg" alt="" />
          <i class="fab fa-facebook-square"></i>
          <i class="fab fa-linkedin"></i>
          <i class="fab fa-twitter-square"></i>
        </div>
      </div>
    </div>
  </body>
</html>

هذه أحد طرق حل المشكلة، يمكنك التعديل وتغيير الطريقة.

Wael Aljamal · 10 ديسمبر 2021

أعتقد أن سبب المشكلة هو اختير العنصر عن طريق id آخر، أي تحديد العنصر الذي يعرض بشكل غير صحيح.

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

ليان أبو شعر · 10 ديسمبر 2021

بتاريخ 17 دقائق مضت قال Wael Aljamal:

أعتقد أن سبب المشكلة هو اختير العنصر عن طريق id آخر، أي تحديد العنصر الذي يعرض بشكل غير صحيح.

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

تفضل

جربت بس مو عارفة شو الخطأ برضووو

Wael Aljamal · 10 ديسمبر 2021

بتاريخ 2 دقائق مضت قال ليان أبو شعر:

تفضل

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

ليان أبو شعر · 10 ديسمبر 2021

بتاريخ 6 دقائق مضت قال Wael Aljamal:

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

https://drive.google.com/drive/folders/1NJLB-RVzenymNk6N8VkFhHZgM_RRJWtC?usp=sharing

اسم ال file المراد عليه التعديل هو ddd

إظهار و إخفاء العناصر ضمن صفحة الويب باستخدام جافاسكربت

السؤال

ليان أبو شعر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ليان أبو شعر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ليان أبو شعر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية