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

Question

我想做一个高级标签，但是我做不到

我有 15 个从页面（按钮）获得的元素。 我们还从页面 (span) 中获得了 5 个元素。

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

告诉我解决方案的逻辑。

我的代码：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

由于跨度元素的“激活”设置在功能上取决于按钮的活动状态，因此您可以迭代这些跨度和按钮以查看在跨度指定的范围内是否有活动按钮，并相应地设置 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>