Question

我正在制作一个简单的卡片组，在点击时旋转，我的问题是我无法选择特定的卡片并将其发送到前面并根据编号再次安排卡片。我改变了代码，但幸运的是，我花了半天的时间才使它有效，但仍无法正常工作。

我希望你理解我。

由于

这是一个示例代码。

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);
    };
  }
}

Answer 2

首先在html的主题部分包含以下语句：

<script src="http://code.jquery.com/jquery-3.2.1.js"></script>

添加然后更改以下标记

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

到

  <div class="card-stack">

最后，我修改了函数cardInit，如下所示：

        function cardInit() {
          for (var i=0; i<cardStack.length; i++) {
            var cNum = i + 1;
            var cName = 'card' + cNum.toString();
            cardStack[i].classList.add(cName);
            $(cardStack[i]).on("click",function()
                                {
                                    prevClassName=this.classList[1];
                                    $(".card1").removeClass("card1").addClass(prevClassName);
                                    this.className=this.className.replace(prevClassName,"card1");
                                });                         
            cardArray.push(cNum);
            stateArray = cardArray;
          };

        };

Answer 3

你是说这个意思吗？

我添加了moveTop功能，如

function moveTop() {
  event.preventDefault();
  event.stopPropagation();
  var index = Array.prototype.slice.call(event.target.parentNode.querySelectorAll('.card')).indexOf(event.target)
  var temp = stateArray[index];
  prevStateArray = stateArray.slice(0);
  stateArray.splice(index, 1);
  stateArray.unshift(temp);

  refreshCards();

}

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();
  refreshCards();
}

function refreshCards() {
  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);
  };
}

function moveTop() {
  event.preventDefault();
  event.stopPropagation();
  var index = Array.prototype.slice.call(event.target.parentNode.querySelectorAll('.card')).indexOf(event.target)
  var temp = stateArray[index];
  prevStateArray = stateArray.slice(0);
  stateArray.splice(index, 1);
  stateArray.unshift(temp);

  refreshCards();

}
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;
  text-align: right;
}

.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" onclick="moveTop()">A</div>
  <div class="card" onclick="moveTop()">B</div>
  <div class="card" onclick="moveTop()">C</div>
  <div class="card" onclick="moveTop()">D</div>
</div>

Answer 4

您遇到的问题是您不知道点击了哪张卡。我的猜测是在调用nextCard（）时传递事件：

onclick="nextCard(event)"

在功能中：

function nextCard(event) {
 // detect which card was picked 
 console.log(event.target);
 // logic to bring picked card to the top
 ...
}

JS：选择并将特定div移到前面

4 个答案: