Переключатель селектора CSS с несколькими значениями

Question

Вот что у меня есть:

SVG с несколькими строками.У них есть типы как классы CSS.Например: .pen1 .pen2 .pen3 .pen4.и .special

Каждая строка имеет одну из первых четырех и может иметь .spcial!Есть также несколько специальных строк.

Возможно активировать и деактивировать каждый из этих классов с помощью кнопок.

Моя проблема:

(строка A имеет .pen1, строка B имеет .pen1 .special, строка C имеет .pen2, строка D имеет .pen2 .special)

Следующая процедура:

• 1) Я нажимаю кнопку для .pen1: A & B исчезают
• 2) Я нажимаю кнопку для .special: D отключается и появляется B
• 3) Я нажимаю кнопкудля .pen1: появляется A и B исчезают

Но мне нужно, чтобы оба исчезли в 2), и после этого оба должны появиться снова в 3).

Мое текущее решение: если янажмите кнопку для .pen1. Я устанавливаю флаг, который был нажат, и проверяю этот флаг, когда я нажимаю .special -> Это работает, но только если только один класс имеет свой собственный и класс .special

Это мой код прямо сейчас:

для специального переключения:

if (this._pen1|| this._pen2|| this.pen3|| this.pen4 ){
      if (this.special) {
        if (this.pen1) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen1).hide(0);
        }
        if (this.pen2) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen2).hide(0);
        }
        if (this.pen3) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen3).hide(0);
        }
        if (this.pen4) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen4).hide(0);
        }
      } else {
        if (this.pen1) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen1).show(0);
        }
        if (this.pen2) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen2).show(0);
        }
        if (this.pen3) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen3).show(0);
        }
        if (this.pen4) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen4).show(0);
        }
      }
    } else {
      [...].find('svg .' + _PENSTYLES.special).toggle(0);
    }
    this.special= !this.special;

для переключения pen1-4:

    if (this.special) {
      [...].find('svg .' + _PENSTYLES.pen1).not('.' + _PENSTYLES.special).toggle(0);
    } else {
      [...].find('svg .' + _PENSTYLES.pen1).toggle(0);
    }
    this.pen1= !this.pen1;  

Я надеюськто-то может помочь мне, как я делаю это для моей проблемы с несколькими строками.Потому что сейчас они pen2 переопределяют pen1 и показывают / скрывают все, что было исключено в других.

Answer 1

Вот упрощение того, что, я думаю, вы ищете, чтобы начать.Запустите фрагмент, чтобы увидеть, как он работает.

var hidden = [];

function toggle(classname) {
  if (hidden.indexOf(classname) > -1) {
    hidden.splice(hidden.indexOf(classname), 1);
    getElements(classname).forEach(function(ele) {
      ele.classList.remove("hidden");
    });
  } else {
    hidden.push(classname);
  }
  hidden.forEach(function(hide) {
    getElements(hide).forEach(function(ele) {
      ele.classList.add("hidden")
    });
  })
}

function getElements(classname) {
  return Array.from(document.getElementsByClassName(classname));
}

html {
  font-family: sans-serif;
}

.root {
  display: flex;
}

.root>div {
  flex: 0 0 80px;
}
button{
 width: 70px;
}

svg line {
  stroke-width: 2;
}

.special {
  stroke: red;
  stroke-dasharray: 5;
}

.pen1 {
  stroke: blue;
}

.pen2 {
  stroke: green;
}

.pen3 {
  stroke: goldenrod;
}

.pen4 {
  stroke: DarkOrchid;
}

text {
  font-size: 14px;
}

.hidden {
  display: none;
}

<div class="root">
  <div>
    <button onclick="toggle('pen1')">.pen1</button>
    <button onclick="toggle('pen2')">.pen2</button>
    <button onclick="toggle('pen3')">.pen3</button>
    <button onclick="toggle('pen4')">.pen4</button>
    <button onclick="toggle('special')">.special</button>
  </div>

  <svg width="400" height="200" viewBox="0 0 400 200">
  <rect width="400" height="200" fill="#efefef" />
  <line class="pen1" y1="20" y2="20" x1="0" x2="300" />
  <line class="pen2" y1="40" y2="40" x1="0" x2="300" />
  <line class="pen3" y1="60" y2="60" x1="0" x2="300" />
  <line class="pen4" y1="80" y2="80" x1="0" x2="300" />
  <line class="pen1 special" y1="100" y2="100" x1="0" x2="300" />
  <line class="pen2 special" y1="120" y2="120" x1="0" x2="300" />
  <line class="pen3 special" y1="140" y2="140" x1="0" x2="300" />
  <line class="pen4 special" y1="160" y2="160" x1="0" x2="300" />
  <line class="special" y1="180" y2="180" x1="0" x2="300" />
  <text x="310" y="20" alignment-baseline="middle">.pen1</text>
  <text x="310" y="40" alignment-baseline="middle">.pen2</text>
  <text x="310" y="60" alignment-baseline="middle">.pen3</text>
  <text x="310" y="80" alignment-baseline="middle">.pen4</text>
  <text x="310" y="100" alignment-baseline="middle">.pen1 .special</text>
  <text x="310" y="120" alignment-baseline="middle">.pen2 .special</text>
  <text x="310" y="140" alignment-baseline="middle">.pen3 .special</text>
  <text x="310" y="160" alignment-baseline="middle">.pen4 .special</text>
  <text x="310" y="180" alignment-baseline="middle">.special</text>
</svg>
</div>

Answer 2

Я дам вам подсказку.Вы всегда можете добавить другой класс с тем же именем для элементов, которые вы хотите переключить.Класс .pen1 и .pen2 могут иметь класс «скрытый» с некоторыми атрибутами.Надеюсь, это поможет:)