时间戳

首页 > 解决方案 > 切换具有多个值的选择器 CSS

javascript - 切换具有多个值的选择器 CSS

问题描述

这就是我所拥有的：

具有多行的 SVG。这些具有作为 CSS 类的类型。例如：.pen1 .pen2 .pen3 .pen4。和 .special

每行都有前四个之一，并且可以有.spcial！还有一些 .special only 行。

可以使用按钮激活和停用这些类中的每一个。

我的问题是：

（A 行有 .pen1，B 行有 .pen1 .special，C 行有 .pen2，D 行有 .pen2 .special）

以下程序：

但我需要在 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 并显示/隐藏其他排除在外的所有内容。

标签： javascripthtmlcsssvg

解决方案

这是我认为您正在寻找的内容的简化，以帮助您入门。运行代码片段以查看它的工作情况。

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>

推荐阅读