javascript - JS :Select and move a specific div to front

Question

我正在开发一个简单的卡片堆栈，单击时会旋转，我的问题是我无法选择特定的卡片并将其发送到前面并根据编号重新排列卡片。我更改了代码，但幸运的是，我花了半天时间才使其工作，但仍然无法工作。

希望你能理解我。

谢谢

这是一个示例代码。

codepen

var cardStack = document.getElementsByClassName('card');
var cardArray = []; // Does not change
var stateArray = []; // Changes - keeps track of card state
var prevStateArray = [];

function cardInit() {
  for (var i=0; i<cardStack.length; i++) {
    var cNum = i + 1;
    var cName = 'card' + cNum.toString();
    cardStack[i].classList.add(cName);
    cardArray.push(cNum);
    stateArray = cardArray;
  };
  
};

function stackRefresh() {
  
  prevStateArray = stateArray.slice(0);
  stateArray.unshift(stateArray.pop());
  
}

function nextCard() {
  
  stackRefresh();
  
  for (var i=0; i<cardStack.length; i++) {
    var cName = 'card' + prevStateArray[i].toString();
    var cNameNew = 'card' + stateArray[i].toString();
    cardStack[i].classList.remove(cName);
    cardStack[i].classList.add(cNameNew);
  };
  
}

cardInit();

body {
  background-color: #2a2a2a;
}

.card {
  width: 200px;
  height: 320px;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  transform-origin: 0% 50%;
  transition: all 1s ease;
}

.card-stack {
  display: inline-block;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-100px);
}

.card1 {
  z-index: 1000;
  left: 0;
}

.card2 {
  z-index: 800;
  transform: scale(0.99);
  filter: brightness(0.9);
  left: 20px;
}

.card3 {
  z-index: 600;
  transform: scale(0.98);
  filter: brightness(0.8);
  left: 40px;
}

.card4 {
  z-index: 400;
  transform: scale(0.97);
  filter: brightness(0.7);
  left: 60px;
  animation-name: remove;
  animation-duration: 1s;
}

@keyframes remove {
  0% {transform: translateX(0px); opacity: 1};
  50% {transform: translateX(-80px); opacity: 0};
  51% {transform: translateX(10px) scale(0.97); opacity: 0};
  100% {transform: translateX(0px) scale(0.97); opacity: 1;}
}

<div class="card-stack" onclick="nextCard();">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
</div>

Answer 1

试试这个 sample

我改变了html

<div class="card-stack" onclick="nextCard(event);">
...

以及js函数

function nextCard(e) {
  var clickedCssClass = e.srcElement.classList[1];
  if (!clickedCssClass) return;
  var match = /(\d+)/.exec(clickedCssClass);
  var clickedNumber = match[0];

  for(var j = 1; j < clickedNumber ; j++){
    stackRefresh();
    for (var i=0; i<cardStack.length; i++) {
      var cName = 'card' + prevStateArray[i].toString();
      var cNameNew = 'card' + stateArray[i].toString();
      cardStack[i].classList.remove(cName);
      cardStack[i].classList.add(cNameNew);
    };
  }
}