如何在JS上制作高级选项卡

Question

我想制作一个高级选项卡，但我做不到

我有 15 个元素，我们从页面(按钮(获得。 我们从页面(跨度(中还可以获得 5 个元素。

我希望在单击每个元素(按钮(时，将"active"类分配给它，但有一个条件：当您单击该数组中的随机元素时，将"active"类分配给它，之后，如果您单击另一个元素(随机(，那么"active"类也被分配给它， 但是，如果您单击第三个随机再次元素，则"活动"类将从第一个按下的按钮(按钮(中删除，但第二个和第三个仍然存在，依此类推。有一个条件，如果我们按 1 或 2 或 3(按钮(，那么类"活动跨度"被分配给第一个元素(跨度(，如果我们按例如 2 和 6(按钮(，那么类"active-span"被分配 1 和 2 个元素(跨度(，但是如果我们按 2 和 6(按钮(并按 8(按钮(， 然后对于 1 个元素 (span(，我们删除类 "active-span"，并将 "active-span" 分配给 3 个元素 (span(。

告诉我解决方案的逻辑。

我的代码：https://codepen.io/MrMarten/pen/eYmLEPv

let elem = document.querySelectorAll('button');
let elemActive = [];
let span = document.querySelectorAll('span');
let spanActive = [];
for (let x of elem) {
x.addEventListener('click', handlerChange)
}
function handlerChange(event) {
if (!this.classList.contains('active')) {
this.classList.add('active');
if (elemActive.push(this) == 3) {
elemActive[0].classList.remove('active');
elemActive.shift();
}
}
};

.active {
color: red;
}
.active-span {
color: red;
border-color: red;
}
span {
margin: 5px 10px;
border: 1px solid;
padding: 5px;
}
.d-flex {
display: flex;
border: none;
}

<div class="d-flex">
<span>1-3</span>
<span>4-6</span>
<span>7-9</span>
<span>10-12</span>
<span>13-15</span>
</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>

Answer 1

由于 span-elements 的"激活"设置在功能上取决于按钮的活动状态，因此您可以迭代这些范围和按钮以查看在 span 指定的范围内是否有活动按钮，并相应地设置 CSS 类。

下面介绍了如何扩展您的函数以实现此目的。

请注意，我已经将您的一些变量重命名为复数形式，当它们表示集合/数组时，我更喜欢这种形式：

let elems = document.querySelectorAll('button');
let elemsActive = [];
let spans = document.querySelectorAll('span');
let spansActive = [];
for (let elem of elems) {
elem.addEventListener('click', handlerChange)
}
function handlerChange(event) {
if (!this.classList.contains('active')) {
this.classList.add('active');
if (elemsActive.push(this) == 3) {
elemsActive.shift().classList.remove('active');
}
spansActive.length = 0; // clear
for (let span of spans) {
let [low, high] = span.textContent.split("-").map(Number);
let active = Array.from(elemsActive, elem => +elem.textContent)
.some(n => n >= low && n <= high);
span.classList.toggle('active', active);
if (active) spansActive.push(span); // (if you still need this array?)
}
}
};

.active {
color: red;
}
.active-span {
color: red;
border-color: red;
}
span {
margin: 5px 10px;
border: 1px solid;
padding: 5px;
}
.d-flex {
display: flex;
border: none;
}

<div class="d-flex">
<span>1-3</span>
<span>4-6</span>
<span>7-9</span>
<span>10-12</span>
<span>13-15</span>
</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>

Answer 2

let elem = document.querySelectorAll('button');
var elemQueue = [];
let span = document.querySelectorAll('span');
for (let x of elem) {
x.addEventListener('click', handlerChange)
}
function handlerChange(event) {

if (elemQueue.indexOf(event.target) === -1) {
elemQueue.push(event.target);
}

if (elemQueue.length > 2) elemQueue.shift();
elem.forEach(el => el.classList.remove('active'));
elemQueue.forEach(el => el.classList.add('active'));

function hasNumber(index) {
return elemQueue
.some(el => {
let number = Number(el.innerText);

return number > ((index - 1)*3) && number <= (index*3);
});
}

console.log(span);

span.forEach((el,ix) => {
if (hasNumber(ix+1)) el.classList.add('active');
else el.classList.remove('active');

});

};

.active { 
color: red; 
border-color: red;
}
.tab {
display: inline-block;
margin: 5px 10px;
border: 1px solid;
padding: 5px;
min-width: 50px;
text-align: center;
}
.tabs{
display: block;
}

<div class="tabs">
<span class="tab">1-3</span>
<span class="tab">4-6</span>
<span class="tab">7-9</span>
<span class="tab">10-12</span>
<span class="tab">13-15</span>
</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>