时间戳

首页 > 解决方案 > 如何在顶部索引未隐藏的元素，而不是 DOM 中的下一个元素？

javascript - 如何在顶部索引未隐藏的元素，而不是 DOM 中的下一个元素？

问题描述

我正在尝试编写卡片绘制仿真代码，但遇到了问题。在我翻转了一张随机卡片后，我无法让那张确切的卡片保持在顶部 - 相反，DOM 中最下方的任何东西都保持在顶部，而其他卡片则落在它下方。

我尝试过使用 Z-index（它什么也没做），我相信这可能是答案，但我认为我正在监督一些事情。还尝试使用计时器隐藏元素，这仍然会导致重叠问题。

任何人都可以向我指出如何使拉出的卡保持在顶部，而不管它在 DOM 中的位置如何？我什至尝试将 DOM 元素进一步提高到更高的 z-index，这对订单没有任何影响。所以我很难找到问题！

JSFiddle

完整代码：

// Functions for displaying the random content when card is clicked

var backgroundImage = document.getElementById("bg");

function first_function(){
console.log("test1");
document.getElementById("a").classList.remove("hide");
  document.getElementById("a2").classList.remove("hide");
document.getElementById("a").style.color = "white";
}

function second_function(){
console.log("test2");
document.getElementById("b").classList.remove("hide");
  document.getElementById("b2").classList.remove("hide");
document.getElementById("b").style.color = "white";
}

function third_function(){
console.log("test3");
document.getElementById("c").classList.remove("hide");
document.getElementById("c2").classList.remove("hide");
document.getElementById("c").style.color = "white";
}

function last_card(){
console.log("last one");
document.getElementById("last").classList.remove("hide");
document.getElementById("last2").classList.remove("hide");
document.getElementById("last").style.color = "white";
}

// Splice array 1 item at a time

Array.prototype.randsplice = function () {
var randomnbr = Math.floor(Math.random() * this.length);
// Removed extra variable
return this.splice(randomnbr, 1);
};

// Use an eventlistener to wait for the DOM to load so that we can depend on DOM elements being available

window.addEventListener("load",function(){

// Setup the array we will use for this example
var my_array = [
    first_function,
    second_function,
    third_function,
];

// Attach a click event handler to our button

backgroundImage.onclick = function(){

// Hide content after each click

var list = document.getElementsByClassName("hide-all");
for(var i=0;i<list.length;i++){
list[i].classList.add("hide");
}

// Modify my_array and display result

if(my_array.length > 0){   
var new_numb = my_array.randsplice();
new_numb[0].apply(null);

// Animation making card unclickable until animation is complete 

backgroundImage.classList.add("animstart");
backgroundImage.addEventListener( "animationend",  function() {
backgroundImage.classList.remove("animstart"); 
} );

// Check if the array is empty and if so, perhaps display a message

}else{
last_card();
backgroundImage.classList.add("no-click");
}
}
});
body, html{
height: 100%;
margin: 0;
background-color: #333;
}
/* Background card */

.bgcard{
width:9.4vw;
display: inline-block;
position:absolute;
left:35.4%;
top:66.2%;
cursor: pointer;
}

/* Animation making card unclickable start */

.animstart{
animation-name: examples;
animation-duration: 1s;
}

@keyframes examples {
    0%   { pointer-events: none;}
    100% { pointer-events: none;}
}

.cards{
z-index: 100;
transform: rotateY(180deg);
width: 14vw;
font-size: 1.2vw;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flip;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

@keyframes flip {
from { transform: rotateY(180deg); left: -10vw; }
to { transform: rotateY(0deg); left: 0vw; }
}

 @keyframes flips {
from { transform: rotateY(0deg); left: -10vw; }
to { transform: rotateY(180deg); left: 0vw; }
}

.frontcard {
width: 14vw;
z-index: 200;
transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flips;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

.frontcard, .back {
backface-visibility: hidden;
position: absolute;
}

.text-wrap{
padding-left: 200px;
width: 50vw;
position: absolute;
}

p{
top: 10%;

animation-name: hidden;
animation-duration: 0.6s;
}

h2{
top: 5%;
animation-name: hidden;
animation-duration: 0.6s;
}

.pulled-card-container{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
z-index: 100;
perspective: 1000;
}

.pulled-card-container-done{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
}

@keyframes example {
    0%   { left:-10vw;}
    25%  { left:0px;}
    50%  { left:0px;}
    75%  { left:0px;}
    100% { left:0px;}
}

  @keyframes hidden {
    0% {opacity: 0;}
    25%  {opacity: 0;}
    50%  {opacity: 0;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}

.no-click{
pointer-events: none;
cursor: none;
}

.hide{
display: none; 
}

.hideanim{
  opacity: 1;
  -webkit-animation-delay: 1s;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 1s; 
  -webkit-animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-name: fadein; 
  animation-duration: 1s;
  animation-timing-function: linear;
}

@-webkit-keyframes fadein {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadein {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
<div class="all-wrap">

<!-- Containers with information -->

<div id="a" class="aa hide ">
    <div id="a2" class="text-wrap hide hide-all">
    <h2>X of Cards</h2>
    <p>First Displayed Text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol1"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/924/2D__57497.1440113502.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div> 
</div>

<div id="b" class="ab hide">
    <div id="b2" class="text-wrap hide hide-all">
    <h2>Y of Cards</h2>
    <p>Second displayed text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol2"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/928/6D__92916.1440113530.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div>
</div>

<div id="c" class="ac hide">
    <div id="c2" class="text-wrap hide hide-all">
<h2>Z of Cards</h2>
    <p>Third displayed text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol3"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div>
</div>

<div id="last" class="hide">
    <div id="last2" class="text-wrap hide hide-all">
<h2>Last of Cards</h2>
    <p>The last card in the deck</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards" src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" alt="" width="200px" height="300px">
                <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div>
</div>


<!-- Background card -->
<div class="bgcard" id="bg">
    <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px">
</div>

</div>

任何帮助是极大的赞赏！

标签： javascriptcssz-index

解决方案

在再坐立不安之后，我发现了我的严重错误。这是答案，以防有人想知道：

我在有冲突的拉卡容器上有 z-index。删除后，并做一个

var zNumb = 300;
zNumb++;
document.getElementById("imgOne").style.zIndex = zNumb;

在每个功能上它都像一个魅力！

推荐阅读