如何在JS上制作高级标签

Question

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

我有15个元素可以从页面（按钮）中获得。我们从页面（跨度）中获得了5个元素。

我希望在单击每个元素（按钮）时，将“活动”类分配给它，但有一个条件：当您从该数组中单击随机元素时，将“活动”类分配给它，此后，如果您单击另一个元素（随机），则也将“活动”类分配给它，但是如果您单击第三个随机又一个元素，则将“活动”类从按下的第一个元素中删除按钮（按钮），但第二和第三个按钮依此类推。有一个条件是，如果我们按下1或2或3（按钮），则将“活动跨度”类分配给第一个元素（跨度），如果我们按下例如2和6（按钮），则该类为“ active-span”分配了1和2个元素（span），但是如果我们按2和6（按钮）并按8（button），则对于1个元素（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');
        }
        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);
        }
    }
};

.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>