Почему не работают табы JS?

Question

Подскажите, почему не работают табы? Есть некотороые манипуляции с JS, может быть влияют они? jQuery(document).ready(function($) { document.querySelectorAll('.productdetails').forEach((item, index) => item.id = "tab" + (index + 1)); }); jQuery(document).ready(function($) { document.querySelectorAll('.jkef').forEach((item, index) => item.id = "link0" + (index + 1)); }); const ul = document.querySelector('.productdetails'); const data = [...ul.children].reduce((acc, n) => { const k = n.textContent.toLowerCase().match(/s(.)/)[1]; (acc[k] = acc[k] || []).push(n.outerHTML); return acc; }, {}); const html = Object .entries(data) .map(([ k, v ]) => `

${k}

${v.join('')}`) .join(''); ul.insertAdjacentHTML('afterend', html); ul.remove(); jQuery(document).ready(function($) { $(function(){ $(".joke").wrapAll("

") }); $(function(){ $(".productdetails").wrapAll("

") }); }); //////////////////////////// const checkbox2tabMap = { link01: 'tab1', link02: 'tab2', link03: 'tab3', link04: 'tab4', link05: 'tab5', link06: 'tab6', link07: 'tab7', link08: 'tab8', link09: 'tab9', link010: 'tab10', link011: 'tab11', link012: 'tab12', link013: 'tab13', link014: 'tab14', link015: 'tab15', link016: 'tab16', link017: 'tab17', link018: 'tab18', link019: 'tab19', link020: 'tab20', link021: 'tab21', link022: 'tab22', }; const toggleTabs = (checkbox2tabMap, currnetBoxId) => { // создаем функцию что бы можно было вызвать при клике Object.keys(checkbox2tabMap) .filter(key => key !== currnetBoxId) // фильтруем массив ключей исключая текущий айди чекбокс и таба .forEach(checkBoxId => { const checkBox = document.getElementById(checkBoxId); const tab = document.getElementById(checkbox2tabMap[checkBoxId]); if (checkBox && tab) { // если в DOM есть чекбокс и таб tab.style.display = 'none'; // скрыть таб checkBox.checked = false; // убрать все чекбоксы checkBox.addEventListener('change', e => { toggleTabs(checkbox2tabMap, e.target.id); // передаем в нашу функцию текущий айди что бы все отфильтровать кроме текущего айди tab.style.display = 'block'; // показываем только текущий таб e.target.checked = true; // чекаем только текущий чекбокс }); } }); }; toggleTabs(checkbox2tabMap);

Quick Brown Fox · Accepted Answer

Полностью переписал код, все работает на ура let letters = []; const itemList = []; document.querySelectorAll('.productdetails li').forEach((el, i) => { const letter = el.innerText.split(' ')[1][0]; letters.push(letter); letters = [...new Set(letters)]; itemList.push({ id: i, content: el.innerHTML, letter: letter }); document.querySelector('.results .tabs').innerHTML = letters.map(el => { return `

${el}

` }); }); document.querySelectorAll('.tabs li').forEach(tab => { tab.onclick = (e) => { document.querySelector('.results .content').innerHTML = itemList.filter(item => item.letter === e.target.innerText).map(item => item.content); const pd = document.querySelector(".productdetails") if (pd) {pd.remove()} } });

Почему не работают табы JS?

One Answer

Add your own answers!

Ask a Question