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

Question

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

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

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

告诉我解决方案的逻辑。

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

标签： javascripthtml

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>