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>
Полностью переписал код, все работает на ура
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP