单击添加类以使用 vanilla JavaScript 隐藏其他元素

Question

当用户单击其中一个 SVG 时，类“单击”将添加到该特定 SVG。 我想要发生的是，当在页面上单击 SVG 时，其他 SVG 元素被隐藏（不透明度：0 或其他值）并且不可点击。

我的JS知识有点有限。 我认为当其他类处于非活动状态时需要将一个类添加到 SVG 中，因为我正在考虑在发生点击时将它们转换出来，但是希望得到任何建议。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive SVG</title>
    <link rel="stylesheet" href="static/css/styles.css" />
  </head>
  <body>
    <div class="container" id="container">
      <svg version="1.0" class="svg svg-a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <rect class="rect rect-a" width="100" height="100" />
      </svg>
      <svg version="1.0" class="svg svg-b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <rect class="rect rect-b" width="100" height="100" />
      </svg>
      <svg version="1.0" class="svg svg-c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <rect class="rect rect-c" width="100" height="100" />
      </svg>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
    <script src="static/js/script.js"></script>
  </body>
</html>

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #222;
  position: relative;
}

svg {
  display: flex;
  width: 100px;
  height: 100px;
  transition: 0.7s ease-out;
}

.rect {
  cursor: pointer;
  fill: #eee;
  transform-origin: 50% 50%;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  box-shadow: 20px 20px 20px 0;
  position: absolute;
}

.rect-a {
  fill: cornflowerblue;
  z-index: 390;
}

.rect-b {
  fill: pink;
  box-shadow: 20px 20px 20px 0;
}

.rect-c {
  fill: azure;
  box-shadow: 20px 20px 20px 0;
}

.clicked {
  fill: cornflowerblue;
  transform: scale(1.2);
  transform-origin: 50% 50%;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.clicked svg {
  fill: red;
  transform: translateY(500px);
}

button {
  position: absolute;
  z-index: 1000;
  color: red;
  top: -5px;
  right: -5px;
  border-radius: 100px;
  z-index: 900;
}

// First we get all the path elements and put them in an array
let paths = document.getElementsByClassName('svg');

// Now we can loop over the array and add an eventlistener to each path in the array and it listens to the 'click' event and then runs function toggleClass()
for (let i = 0; i < paths.length; i++) {
  paths[i].addEventListener('click', toggleClass);
}

// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass() {
  this.classList.toggle('clicked');
}

https://codepen.io/chrismorrison/pen/ZEWdJyV

Answer 1

更新了CodePen，粗略地实现了我相信您正在寻找的内容。

以下是我所做的更改：

JS

// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass(e) {
  const clickedClassName = 'clicked';
  
  // If "disabled", don't respond to the click event.
  if(this.classList.contains('disabled')) {
    e.preventDefault();
  } 
  // The element is "enabled".  Has it been clicked
  // already?  If so, we need to restore it along with
  // all the other SVGs back to their original state.
  // If not, then hide all other SVGs and add the "clicked"
  // class to the element that was clicked
  else if(!this.classList.contains(clickedClassName)) {
    this.classList.add(clickedClassName);
    
    for(let p of paths) {
      if(this !== p) {
        toggleDisabled(p)
      }
    }
  } else {
    this.classList.remove(clickedClassName);
    
    for(let p of paths) {
      if(this !== p) {
        toggleDisabled(p)
      }
    }
  }
}

function toggleDisabled(p) {
  p.classList.contains('disabled') ? p.classList.remove('disabled') : p.classList.add('disabled')
}

CSS

.disabled {
  opacity: 0;
}

单击添加类以使用 vanilla JavaScript 隐藏其他元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-05 16:44:44

JS

CSS

单击添加类以使用 vanilla JavaScript 隐藏其他元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-05 16:44:44

JS

CSS

解决方案1
1 已采纳 2020-10-05 16:44:44