مساعده فى تكرار function لاكتر من class فى javascript

Ahmed Osama21 · 4 أكتوبر 2023

لو سمحت لسه مبتدىء

محتاج اعمل جدول الجدول فيه Dropdown محتاج لما ادوس على ال input يفتح معايا الى menue

محتاج اعمل دا بشكل اوتماتيك فى كل dropdown عندى ليها نفس ال calss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <table>
    <thead></thead>
    <tbody>
      <td>
        <tr>
          <div class="dropdown">
            <div class="search_input">
              <input id="input" type="text" placeholder="search" onclick="">
            </div>
            <div class="menue">
              <p>html</p>
              <p>CSS</p>
              <p>js</p>
            </div>
          </div>
        </tr>
      </td>

      <td>
        <tr>
          <div class="dropdown">
            <div class="search_input" >
              <input id="input" type="text" placeholder="search">
            </div>
            <div class="menue">
              <p>html</p>
              <p>CSS</p>
              <p>js</p>
            </div>
          </div>
        </tr>
      </td>
    </tbody>
    <tfoot></tfoot>
  </table>
  <button>add new row</button>
  <script src="/main.js"></script>
</body>
</html>

.dropdown{
    width: 180px;
    position: relative;
    margin: 5px;
}

.menue{
    position: absolute;
    width: 100%;
    display: none;
    border: blue;
    background-color: lightgray;
    z-index: 1;
}

.active{
    display: block;
}

هنا كود ال جافاسكريبت

const input = document.querySelector("#input");
const menue = document.querySelector(".menue");


input.addEventListener("click", function(){
    menue.classList.toggle('active')
})

انا محتاج اعمل الجدول فى كل صف فية dropdown وهضيف صفوف كتير عايز لما ادوس على ال input يفتح معايا ال dropdown

سمير عبود · 4 أكتوبر 2023

بإمكانك إضافة كلاس مشترك لكل حقول الإدخال التي تريد الضغط عليها، ثم تحديد العناصر عبر التابع querySelectorAll الذي يعيد كل العناصر ثم عبر حلقة forEach تضيف لكل عُنصر EventListener بالشكل التالي:

document.addEventListener("DOMContentLoaded", () => {

  document.querySelectorAll('.myInput').forEach(input => {
    input.addEventListener("click", function () {
      this.parentElement.nextElementSibling.classList.toggle('active')
    })
  })

});

بعد ان تضع لحقول الإدخال الصنف myInput:

<input type="text" class="myInput" placeholder="search">
                   ^^^^^^^^^^^^^^^

أو تضع أي إسم المهم أن تستهدفه عبر querySelectorAll.

بداخل المعالج (handler) تقوم بالتدرج من حقل الإدخال إلى عُنصر القائمة الذي تريد تبديل ظهوره و إخفائه. كما هو موضح:

this.parentElement.nextElementSibling.classList.toggle('active')

Hikmat Jaafer · 5 أكتوبر 2023

يمكنك فعل ذلك مثل ما قال استاذ سمير , لكن يجب عليك اضافة ذلك عند اضافة سطر جديد , الكود التالي يوضح ذلك :

ملف HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .dropdown {
            width: 180px;
            position: relative;
            margin: 5px;
        }

        .menu {
            position: absolute;
            width: 100%;
            display: none;
            border: blue;
            background-color: lightgray;
            z-index: 1;
        }

        .active {
            display: block;
        }
    </style>
</head>
<body>

<table>
    <thead></thead>
    <tbody>
        <tr>
            <td>
                <div class="dropdown">
                    <div class="search_input">
                        <input class="input" type="text" placeholder="search">
                    </div>
                    <div class="menu">
                        <p>html</p>
                        <p>CSS</p>
                        <p>js</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="dropdown">
                    <div class="search_input">
                        <input class="input" type="text" placeholder="search">
                    </div>
                    <div class="menu">
                        <p>html</p>
                        <p>CSS</p>
                        <p>js</p>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>
<button id="add-row">add new row</button>

<script src="main.js"></script>
</body>
</html>

ملف main.js :

// main.js
const inputs = document.querySelectorAll(".input");
const menus = document.querySelectorAll(".menu");

inputs.forEach((input, index) => {
    input.addEventListener("click", function() {
        menus[index].classList.toggle("active");
    });
});

const addRowButton = document.querySelector("#add-row");
addRowButton.addEventListener("click", function() {
    const newRow = document.createElement("tr");
    const newCell = document.createElement("td");
    const newDropdown = document.createElement("div");
    const newSearchInput = document.createElement("div");
    const newInput = document.createElement("input");
    const newMenu = document.createElement("div");

    newDropdown.className = "dropdown";
    newSearchInput.className = "search_input";
    newInput.className = "input";
    newInput.type = "text";
    newInput.placeholder = "search";
    newMenu.className = "menu";
    newMenu.innerHTML = `
        <p>html</p>
        <p>CSS</p>
        <p>js</p>
    `;

    newDropdown.appendChild(newSearchInput);
    newSearchInput.appendChild(newInput);
    newDropdown.appendChild(newMenu);
    newCell.appendChild(newDropdown);
    newRow.appendChild(newCell);

    const tbody = document.querySelector("tbody");
    tbody.appendChild(newRow);

    inputs.push(newInput);
    menus.push(newMenu);

    newInput.addEventListener("click", function() {
        newMenu.classList.toggle("active");
    });
});

تمت إضافة زر "add new row" لإضافة صف جديد إلى الجدول، وعند النقر على الزر، سيتم إنشاء عناصر HTML جديدة وإضافتها إلى الجدول، مع تعيين استماع الحدث على المدخل الجديد المنشئ لتبديل الفئة النشطة على القائمة الجديدة.

Ahmed Osama21 · 6 أكتوبر 2023

أ / سمير عبود انا شاكر ليك جدا انا استفدت منك وجربت الكود واتعلمته والكود شغال الله يكرمك تسلم والله

أ / Hikmat Jaafer ربنا يجازيك خير والله استاذى والله الكود بتاع حضرتك افدنى كتير واتعلمت منه وسجلته جزاك الله خيرا

لكن لو ينفع تتم جميلك انا لما بمل الكود ورا حضرتك بيضيف تمام صف فى الجدول وكل شىء لكن مبيفتحش معايا ال menue فى العناصر الجديده المضافه

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

Hikmat Jaafer · 7 أكتوبر 2023

وجزاك الله الخير سيد احمد .
يمكنك فعل ذلك بوضع حدث click لnewInput قبل إضافته الى الinputs , أي سوف يكون ملف javascript كالتالي :

const inputs = document.querySelectorAll(".input");
const menus = document.querySelectorAll(".menu");

inputs.forEach((input, index) => {
    input.addEventListener("click", function() {
        menus[index].classList.toggle("active");
    });
});

const addRowButton = document.querySelector("#add-row");
addRowButton.addEventListener("click", function() {
    const newRow = document.createElement("tr");
    const newCell = document.createElement("td");
    const newDropdown = document.createElement("div");
    const newSearchInput = document.createElement("div");
    const newInput = document.createElement("input");
    const newMenu = document.createElement("div");

    newDropdown.className = "dropdown";
    newSearchInput.className = "search_input";
    newInput.className = "input";
    newInput.type = "text";
    newInput.placeholder = "search";
    newMenu.className = "menu";
    newMenu.innerHTML = `
        <p>html</p>
        <p>CSS</p>
        <p>js</p>
    `;

    newDropdown.appendChild(newSearchInput);
    newSearchInput.appendChild(newInput);
    newDropdown.appendChild(newMenu);
    newCell.appendChild(newDropdown);
    newRow.appendChild(newCell);
    
    newInput.addEventListener("click", function() {
        newMenu.classList.toggle("active");
    });
    
    const tbody = document.querySelector("tbody");
    tbody.appendChild(newRow);
   
    inputs.push(newInput);
    menus.push(newMenu);

    
});

Ahmed Osama21 · 9 أكتوبر 2023

يا اخى الحبيب واستاذى الفاضل استاذ Hikmat Jaafer اسأل الله ان يرزقك الجنة بغير حساب

وجزاك الله خيرا انت والاستاذ سمير عبود

Ahmed Osama21 · 9 أكتوبر 2023

اشهد الله انى سعيد جدا واستفدت جدا من حضرتك استاذ Hikmat Jaafer وقد سجلت هذه المعلومات وكتبتها بمفردى غيبا مرارا وتكرارا على امثله اخرى جزاك الله خيرا

هل من الممكن ان اسأل حضرتك شىء اخر ؟

الان فى هذا ال menu سأضع input text للبحث

عملت Function تمكنى من اخفاء ال menu فى حدث focusout

الكود يعمل بكفاءه لكن سيدى الفاضر اريد عندما اضغط على هذا ال input text الذى بداخل ال menu للبحث لا تختفى ال menu

كيف افعل ذلك استاذى

// show menue
const inputs = document.querySelectorAll(".input");
const menus = document.querySelectorAll(".menu");

inputs.forEach((input, index) => {
    input.addEventListener("click", function() {
        menus[index].classList.toggle("active");
    });
});

// hide menue
inputs.forEach((input, index) => {
    input.addEventListener("focusout", function() {
        menus[index].classList.remove("active");
    });
});

Hikmat Jaafer · 11 أكتوبر 2023

الله يسلمك , أفضل تمنياتي لك .
--
بالنسبة للسؤال :
لتحقيق ذلك، يمكنك إضافة شرط داخل حدث النقر (click) على عناصر الإدخال (input) للبحث. هذا الشرط يتحقق إذا كان القائمة غير مرئية (غير مضافة لها الصنف "active")، في هذه الحالة، لا تقم بإزالة الصنف "active" من القائمة.

هنا هو الكود المعدل:

// show menue
const inputs = document.querySelectorAll(".input");
const menus = document.querySelectorAll(".menu");

inputs.forEach((input, index) => {
    input.addEventListener("click", function() {
        if (!menus[index].classList.contains("active")) {
            menus[index].classList.add("active");
        }
    });
});

// hide menue
inputs.forEach((input, index) => {
    input.addEventListener("focusout", function() {
        menus[index].classList.remove("active");
    });
});

بهذا التعديل، عند النقر على عنصر الإدخال الموجود داخل القائمة، لن يتم إزالة صنف "active" من القائمة عند حدوث حدث focusout.

تم التعديل في 11 أكتوبر 2023 بواسطة Hikmat Jaafer

مساعده فى تكرار function لاكتر من class فى javascript

السؤال

Ahmed Osama21

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

Recommended Posts

سمير عبود

Hikmat Jaafer

Ahmed Osama21

Hikmat Jaafer

Ahmed Osama21

Ahmed Osama21

Hikmat Jaafer

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية