hasAttributes مشكلة في التحقق من سمة معينة

المشكلة كتالي اريد جلب سمة في bd-data-toggle وتغيير العنصر من <a> الي span او فكرة احسن من تغيير العنصر

هذه صورة القائمة


الكود

كدة جبت ul menuNave = document.getElementById('menu-nav')

و li hasAtt = menuNave.children;

و for تجيب <a> في <li> و شرط حسب السمة يعطل الرابط او يحولو الي <span>

اشوف التعليقات وقيم :joy:

2 Likes

هيا شباب هل عندكم اقتراح ؟ @sniperadmin @L.Da @Ayman97

2 Likes

لماذا لا تقوم بعمل append لعناصر li حسب الشرط اللي تريده؟ بحالة متل حالتك هذا هو الـ best practice

3 Likes

معلش علي التئخير علي الرد

لماذا لا تقوم بعمل append لعناصر li حسب الشرط اللي تريده؟ بحالة متل حالتك هذا هو الـ best practice

مش عاوز اضيف child لل Attribute المشروط عاوز اغير عنصر <a> او عند الضغط عليه ما يتفعل اذا Attribute === الشرط

دي فكرتي فيه فكرة تاني مش عارف!

1 Like

دا اخر المحاولات

النتيجة في console
Capdture

باجي اعمل إنشاء لعنصر <span> بعمل شرط <a> فيه السمة يغير العنصر الي <span>

وبيدني خطأ
Capture2

ممكن مساعدة :slightly_smiling_face:

1 Like

ممكن كود الـ HTML لديك

1 Like

1 Like

أولًا، سبب رسالة الخطأ هو استدعاء hasAttribute مباشرة على aLink اللي هي array of elements وليست element

قم باستدعائها بالشكل التالي

if(aLink[i].hasAttribute('data-toggle')) {
    bla bla bla
}

ثانيًا تقوم دالة replaceChild بتغيير عنصر موجود داخل العنصر الأب، فإن قمت باستدعاءها بهذا الشكل aLink[i].replaceChild فالعنصر الموجود داخل aLink[i] هو textNode وليس a tag

2 Likes

تمام جبت <li> والشرط علي class بعد كدة يضيف <span> كطفل، ناقص Method تغير <a> الي <span>


Capture3

1 Like

بعد تغيير الشرط صار فيك تشتغل بسلاسة أكبر

فتكتب لجلب العناصر التي تريد تبديلها بشكل مباشر

const items = document.querySelectorAll('.li-dropdown > a')

ثم تستخدم replaceWith لتبديلها بـ span

for(let i = 0; i < count; i++) {
    const span = document.createElement('span')
    items[i].replaceWith(span)
}
2 Likes

كل شئ مش تمام ما عدا Method ()replaceWith بتحذف <a> وتحط <span> مكانه، بدور على Method تغير <span> بدون المحتوي :thinking:

1 Like

السلام عليكم

اهلا بك يا صديقي اتمنى ان استطيع المساعدة.
لدي سؤال لماذا تريد تغييرa إلى span ؟

3 Likes

في قائمة Them and More عند hover تظهر القائمة ولكن click تعمل اعادة تحميل للصفحة، مش عارف احذف href ولا اغير <a> الي <span> فقررت اغير <a> تفكير واحد مبتدأ ايه الاحسن.
Capture24

2 Likes

حسنا إذا كنت لا تحتاج href من الأساس فبإمكانك استخدام span بدلا منها

<ul id="menu-nav">
  <li class="li-items"><a href="#" class="a-nav-link">About Us</a></li>
  <li class="li-items">
    <span data-toggle="bd-dropdown">More</span>
    <ul class="drop-down-menu">
      <li><a href="#" class="a-nav-link">More</a></li>
      <li><a href="#" class="a-nav-link">More</a></li>
      <li><a href="#" class="a-nav-link">More</a></li>
      <li><a href="#" class="a-nav-link">More</a></li>
    </ul>
  </li>
3 Likes

لا اقصد ذلك <a> بيضاف دينمك لو جيت اضيف قائمة تاني مش هغير <span> كل ما اضيف

مثال علي Bootstrap يضغط الشخص تظهر القائمة ما بيفتح رابط جديد ولا بيحدث الصفحة، بس الفكرة عندي hover عادي وعند الضغط بيحدث الصفحة دي كانت الفكرة يحذف السمة href يا اغير <a> الي <span> اتمنا تكون وصلت الفكرة احسن ما اكون اسوء طالب يوصل معلومة :joy:
Capture25

1 Like

احسن ما اكون اسوء طالب يوصل معلومة :joy:

لا تفل كذلك.

  • في بادئ الأمر أريد منك أن تعرف أنه لا يفضل إزالة href من a. لإنك بهذه الطريق تحوله إلى مجرد text و في هذه الحالة الافضل استخدام span

  • الطريقة الثانية و هي استبدال a ب span. فأنا لا أفضلها لانه لا داعي من الأساس لإضافة a و من ثم استبدالها span

  • الطريقة الأفضل و هي كتابة html كما أخبرتك سابقا

  • في جميع الأحوال أضفت لك كيف يمكنك عمله بكلتا الطريقتين

لا اقصد ذلك <a> بيضاف دينمك لو جيت اضيف قائمة تاني مش هغير <span> كل ما اضيف

صديقي لا أعلم ما الطريقة التي تستخدمها لإضافته dynamically و لكن بما أنك ما زلت في أول الطريق فنصيحيتي لك أن تحاول أن تكتب الكود بأكمله بنفسك لأن ذلك سيساعدك على تحسين قدراتك أكثر و أكثر و ألا تعتمد كثير على lib.

و بالتوفيق لك.

4 Likes

تمام الكود عمل المطلوب
Capture-1

لا استخدم مكتبات

شكراً :heart_eyes: @Ahmed_Elbohoty @LouayH

4 Likes

شرح الكود

document.addEventListener('DOMContentLoaded', () => {}

هذا الجزء من الكود يعمل على تشغيل الكود بعد تحميل محتوي الصفحة

 const links = Array.from(document.getElementsByClassName('a-nav-link'));

يجيب جميع links فى Array.from() مصفوفة ب بس ما يدعم interinternet explorer :joy: ما تشغل بالك

links.forEach((link) => {}

بيعمل حلقة على links ويجيب قيمة لعنصر بنعينة بعدين ممكن تعلق على الجزء دا @Ahmed_Elbohoty

const att = link.getAttribute('data-toggle');

والجزء دا من الكود بيجيب سمة

if (att === 'bd-dropdown') {
  // الطريقة الأولى
  link.removeAttribute('href');
}

هنا فيه شرط if لو السمة 'data-toggle' قيمتها 'bd-dropdown' بيحذف سمة href

ممكن مراجعا لشرح الكود @Ahmed_Elbohoty

3 Likes

شرحت و أوفيت :smile:

بالتوفيق لك.

3 Likes