Question

我正在尝试创建一个由id分配的div。

我的目标是让div有两面：前面和后面（按类分配）
*正面显示为默认值，而背面仅在用户点击时显示

我的问题是，当我试图制作很多这个div时，我怎样才能实现这种情况，它只会在那个特定的id中显示/隐藏这些类？

<div id="user01" onclick="userId(this)">
    <div class="front">
        <img src="../media/media/alumni/sdc/01.jpg"> User name on front 
    </div>
    <div class="back">
        other info on back
    </div>
</div>

**每个用户分配了user01（例如：第一个用户是01，第二个用户是02，依此类推......）

谢谢：）

Answer 1

在class：

的顶部使用css id

<div id="user01" class="user">

然后，在您的Javascript中，使用document.querySelectorAll以及class：

let users = document.querySelectorAll('.user')

现在，您可以遍历document.querySelectorAll返回的DOM节点集合，并为每个节点集合添加一个事件侦听器：

Array.prototype.forEach.call(users, function(user) {
  user.addEventListener('click', function(event) {
    /* your code to be executed on click 
       each user is available here as 'this' */
    // example:
    this.classList.toggle('active')
  })
})

正如mplungjan所指出的，Edge和IE不支持节点集合上的forEach，因此Array.prototype.forEach.call(users, function(user) ...可以替代users.forEach(function(user) { ...。

最后一步，添加翻转你的东西的CSS：

.user .front {
  transition: opacity .3s ease;  
  opacity: 1;
}
.user.active .front {
  opacity: 0;
}
.user .back {
  transition: opacity .3s ease;  
  opacity: 0;
}
.user.active .back {
  opacity: 1;
}

let users = document.querySelectorAll('.user')

Array.prototype.forEach.call(users, function(user) {
  user.addEventListener('click', function(event) {
    /* your code to be executed on click 
       each user is available here as 'this' */
    // example:
    this.classList.toggle('active')
  })
})

.user {
  display: inline-block;
  height: 200px;
  width: 200px;
  position: relative; /* this allows absolute position of children */
}

.user:hover {
  cursor: pointer;
}

.user .front,
.user .back {
  transition: opacity .3s ease;
  color: white;
  position: absolute; /* position both "sides" on top of each other */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.user .front img,
.user .back img {
  position: absolute;
  z-index: 0;
}

.user .front span,
.user .back span {
  background-color: rgba(0,0,0,.3);
  box-shadow: 0 0 10px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
  border-radius: 10px;
  display: block;
  left: 50%;
  padding: 10px 5px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.front {
  opacity: 1;
}

.user.active .front {
  opacity: 0;
}

.back {
  background-color: #333;
  opacity: 0;
}

.user.active .back {
  opacity: 1;
}

<div class="user" id="user01">
  <div class="front">
    <img src="https://lorempixel.com/output/business-q-c-200-200-8.jpg"><span>User 1 name on front</span>
  </div>
  <div class="back">
    other info on back for User 1
  </div>
</div>
<div class="user" id="user02">
  <div class="front">
    <img src="https://lorempixel.com/output/business-q-c-200-200-2.jpg"><span>User 2 name on front</span>
  </div>
  <div class="back">
    other info on back for User 2
  </div>
</div>

如何仅在该ID

1 个答案: