TransWikia.com

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

Stack Overflow на русском Asked on August 30, 2021

Подскажите, почему не работают табы? Есть некотороые манипуляции с 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 ]) => `<div class="fix-item2 smart-2 joke">
  <input id="" class="linkinp form-check-input jkef" name="b" type="radio" value="${k}/">
  <label class="link">${k}</label></div>
  <ul class="tab2 productdetails ${k}-litter">${v.join('')}</ul>`)
  .join('');

ul.insertAdjacentHTML('afterend', html);
ul.remove();


jQuery(document).ready(function($) {
    $(function(){
        $(".joke").wrapAll("<div class='rower2'></div>")
    });
    $(function(){
        $(".productdetails").wrapAll("<div class='nav-block'></div>")
    });
});



    ////////////////////////////
    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);
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous">
</script>

<ul class="vmproduct productdetails">
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire E5-772G-57DL</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer TravelMate 244LCe</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire 3750G-2434G64Mnkk</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire 3 A315-21G-68RJ</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Swift SF514-53T-78DH</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire 3 A315-55G-391G</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire 4220</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Pator Helios 300 PH317-51-78Z8</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer Aspire 3 A315-55G-35V5</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer TravelMate TMP257-M-539K</li>
                            <li class="product-container  width0floatleft "><a ></a><div class="clear"></div><input class="form-check-input wannaup"  type="checkbox">Acer TravelMate 5512AWLMi</li>
    </ul>

One 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 `<li>${el}</li>`
    });

});

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()}
  }

});

Correct answer by Quick Brown Fox on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP