javascript - 如何设置多个元素的 z-index 并在模态中使用 javascript 动态更新它们？
问题描述
当用户单击任何div打开的模态并在模态内部将所有 div 分组在一起并用作滑块时，我已经编写了一个代码。但我想z-index在用户点击的 div 上给出最高的值，然后根据最高的z-indexdiv 携带下一个和上一个按钮功能。
目前，当我们单击 div 时，会出现模态并在最后一张幻灯片上设置最高的 z-index，然后下一个和上一个按钮相应地工作。
以下是代码：-
$(function() {
$('.gallery-wrapper').each(function() {
var $this = $(this),
galleryPopup = $this.find('.gallery-popup'),
prevBtn = $this.find('.prev-btn'),
nextBtn = $this.find('.next-btn'),
posts = $this.find('.post'),
current = 0
// -------- Opening popup by clicking on any item-link
// --------------------------------------------
$this.find('.item-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeIn();
$('body, html').css('overflow', 'hidden');
});
// -------- Closing popup by clicking on close-link
// --------------------------------------------
$this.find('.close-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeOut();
$('body, html').css('overflow', 'initial');
});
// -------- Popup slider script
// --------------------------------------------
var galleryWrapper = document.querySelector('.gallery-wrapper');
var controls = galleryWrapper.querySelector('.button-holder');
var els = galleryWrapper.querySelectorAll('.post');
var order = Object.keys(els);
var cn;
var highestElm;
function setZIndex() {
for (var i in order) els[order[i]].style.zIndex = i;
}
function findHighestZIndex(elem) {
var highest = 0;
var highestElement = null;
var elems = document.getElementsByClassName(elem);
for (var i = 0; i < elems.length; i++) {
var style = document.defaultView.getComputedStyle(elems[i], null);
var zindex = style.getPropertyValue("z-index");
if ((zindex != 'auto') && (+zindex > highest)) {
highest = zindex;
highestElement = elems[i];
}
}
return highestElement;
}
// assign a click handler to the parent
controls.onclick = function(e) {
var elem = findHighestZIndex('post');
var nodes = Array.prototype.slice.call(document.querySelector('.collection').children);
highestElm = Number(nodes.indexOf(elem));
if (!(cn = (e.target.className.match(/prev-btn|next-btn/) || [false])[0])) return;
if (cn === "prev-btn") {
if (highestElm == 0) {
var lastChildElem = galleryWrapper.querySelector('.collection').lastElementChild;
lastChildElem.classList.add('animate-out');
setTimeout(function() {
lastChildElem.classList.remove('animate-out');
}, 300);
} else {
els[highestElm - 1].classList.add('animate-out');
setTimeout(function() {
els[highestElm - 1].classList.remove('animate-out');
}, 300);
}
order.unshift(order.pop());
setTimeout(function() {
setZIndex();
}, 400);
}
if (cn === "next-btn") {
els[highestElm].classList.add('animate');
setTimeout(function() {
els[highestElm].classList.remove('animate');
setZIndex();
}, 300);
order.push(order.shift());
setZIndex();
}
}
setZIndex();
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden !important;
}
.gallery-popup {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.collection {
max-width: 300px;
margin: 0 auto;
perspective: 1500px;
position: absolute;
left: 50%;
top: 120px;
transform: translateX(-50%);
width: 100%;
}
.post {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: orangered;
border: 5px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}
.post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.animate {
transform: translate3d(350px, 25px, -400px);
z-index: 999 !important;
}
.animate-out {
transform: translate3d(380px, 85px, -590px);
z-index: -1 !important;
/* keygrame if needed */
}
.button-holder {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
}
.button-holder button {
margin: 5px;
width: 70px;
height: 30px;
border-radius: 0;
border: none;
background: orangered;
color: #fff;
}
.close-link {
color: #fff;
position: absolute;
right: 15px;
top: 15px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 34px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: 'Arial';
background: orangered;
}
.gallery-row {
display: flex;
flex-wrap: wrap;
padding: 15px;
margin-left: -10px;
margin-right: -10px;
}
.gallery-row .item {
padding: 10px;
flex: 0 0 25%;
max-width: 25%;
height: 250px;
background: orangered;
border: 2px solid #fff;
position: relative;
}
.gallery-row .item a {
display: flex;
position: absolute;
height: 100%;
top: 0;
width: 100%;
left: 0;
font-size: 24px;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
}
.gallery-row .item img {
width: 100%;
height: 100%;
object-fit: cover;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-wrapper">
<div class="gallery-row">
<div class="item">
<a href="#" class="item-link">
<span>1</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>2</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>3</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>4</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>5</span>
</a>
</div>
</div>
<!-- Gallery Popup -->
<div class="gallery-popup">
<a href="javascript:void(0)" class="close-link">x</a>
<div class="collection">
<div class="post">
<span>1</span>
</div>
<div class="post">
<span>2</span>
</div>
<div class="post">
<span>3</span>
</div>
<div class="post">
<span>4</span>
</div>
<div class="post">
<span>5</span>
</div>
</div>
<div class="button-holder">
<div>
<button class="prev-btn">Previous</button>
</div>
<div>
<button class="next-btn">Next</button>
</div>
</div>
</div>
<!-- End of Gallery Popup -->
</div>解决方案
试试这样：
$(function() {
$('.gallery-wrapper').each(function() {
var $this = $(this),
galleryPopup = $this.find('.gallery-popup'),
prevBtn = $this.find('.prev-btn'),
nextBtn = $this.find('.next-btn'),
posts = $this.find('.post'),
current = 0
// -------- Opening popup by clicking on any item-link
// --------------------------------------------
$this.find('.item-link').on('click', function(event) {
event.preventDefault();
setOrderClicked($(event.target));
galleryPopup.fadeIn();
$('body, html').css('overflow', 'hidden');
});
// -------- Closing popup by clicking on close-link
// --------------------------------------------
$this.find('.close-link').on('click', function(event) {
event.preventDefault();
galleryPopup.fadeOut();
$('body, html').css('overflow', 'initial');
});
// -------- Popup slider script
// --------------------------------------------
var galleryWrapper = document.querySelector('.gallery-wrapper');
var controls = galleryWrapper.querySelector('.button-holder');
var els = galleryWrapper.querySelectorAll('.post');
var order = Object.keys(els);
var cn;
var highestElm;
function setOrderClicked(el) {
var index = $('.item-link').index(el);
order = [];
for(var i = 0; i < els.length; i++) {
index = (index === els.length - 1 ? 0 : index + 1);
order.push(index.toString());
};
setZIndex();
};
function setZIndex(){
for (var i in order) els[order[i]].style.zIndex = i;
}
function findHighestZIndex(elem) {
var highest = 0;
var highestElement = null;
var elems = document.getElementsByClassName(elem);
for (var i = 0; i < elems.length; i++) {
var style = document.defaultView.getComputedStyle(elems[i], null);
var zindex = style.getPropertyValue("z-index");
if ((zindex != 'auto') && (+zindex > highest)) {
highest = zindex;
highestElement = elems[i];
}
}
return highestElement;
}
// assign a click handler to the parent
controls.onclick = function(e) {
var elem = findHighestZIndex('post');
var nodes = Array.prototype.slice.call(document.querySelector('.collection').children);
highestElm = Number(nodes.indexOf(elem));
if (!(cn = (e.target.className.match(/prev-btn|next-btn/) || [false])[0])) return;
if (cn === "prev-btn") {
if (highestElm == 0) {
var lastChildElem = galleryWrapper.querySelector('.collection').lastElementChild;
lastChildElem.classList.add('animate-out');
setTimeout(function() {
lastChildElem.classList.remove('animate-out');
}, 300);
} else {
els[highestElm - 1].classList.add('animate-out');
setTimeout(function() {
els[highestElm - 1].classList.remove('animate-out');
}, 300);
}
order.unshift(order.pop());
setTimeout(function() {
setZIndex();
}, 400);
}
if (cn === "next-btn") {
els[highestElm].classList.add('animate');
setTimeout(function() {
els[highestElm].classList.remove('animate');
setZIndex();
}, 300);
order.push(order.shift());
setZIndex();
}
}
setZIndex();
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden !important;
}
.gallery-popup {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.collection {
max-width: 300px;
margin: 0 auto;
perspective: 1500px;
position: absolute;
left: 50%;
top: 120px;
transform: translateX(-50%);
width: 100%;
}
.post {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: orangered;
border: 5px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}
.post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.animate {
transform: translate3d(350px, 25px, -400px);
z-index: 999 !important;
}
.animate-out {
transform: translate3d(380px, 85px, -590px);
z-index: -1 !important;
/* keygrame if needed */
}
.button-holder {
position: absolute;
bottom: 50px;
width: 100%;
text-align: center;
}
.button-holder button {
margin: 5px;
width: 70px;
height: 30px;
border-radius: 0;
border: none;
background: orangered;
color: #fff;
}
.close-link {
color: #fff;
position: absolute;
right: 15px;
top: 15px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 34px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: 'Arial';
background: orangered;
}
.gallery-row {
display: flex;
flex-wrap: wrap;
padding: 15px;
margin-left: -10px;
margin-right: -10px;
}
.gallery-row .item {
padding: 10px;
flex: 0 0 25%;
max-width: 25%;
height: 250px;
background: orangered;
border: 2px solid #fff;
position: relative;
}
.gallery-row .item a {
display: flex;
position: absolute;
height: 100%;
top: 0;
width: 100%;
left: 0;
font-size: 24px;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
}
.gallery-row .item img {
width: 100%;
height: 100%;
object-fit: cover;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-wrapper">
<div class="gallery-row">
<div class="item">
<a href="#" class="item-link">
<span>1</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>2</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>3</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>4</span>
</a>
</div>
<div class="item">
<a href="#" class="item-link">
<span>5</span>
</a>
</div>
</div>
<!-- Gallery Popup -->
<div class="gallery-popup">
<a href="javascript:void(0)" class="close-link">x</a>
<div class="collection">
<div class="post">
<span>1</span>
</div>
<div class="post">
<span>2</span>
</div>
<div class="post">
<span>3</span>
</div>
<div class="post">
<span>4</span>
</div>
<div class="post">
<span>5</span>
</div>
</div>
<div class="button-holder">
<div>
<button class="prev-btn">Previous</button>
</div>
<div>
<button class="next-btn">Next</button>
</div>
</div>
</div>
<!-- End of Gallery Popup -->
</div>打开模态查看器以显示特定 div 的关键是了解order每个 div 显示时数组的样子：
index, order
0, ["0", "1", "2", "3", "4"]
1, ["1", "2", "3", "4", "0"]
2, ["2", "3", "4", "0", "1"]
3, ["3", "4", "0", "1", "2"]
4, ["4", "0", "1", "2", "3"]
例如，要显示 div 2 (index = 1)，order必须是["1", "2", "3", "4", "0"].
setOrderClicked添加了order根据点击的 div 的索引设置数组的功能。它是从.item-link点击事件中调用的。首先，它使用.index()函数来查找被点击的 div 的索引。然后它重建order数组以匹配上述模式。最后，它调用setZIndex应用新z-index值。
推荐阅读
- sql-server - SSAS MDX - 指定计算的度量值
- chromium - 如何限制从 Chromium 到 SOCKS5 代理服务器的连接数？
- firefox - Firefox 存储未更新
- linux - 在 Debian 上按 Ctrl+Shift+[1,2,3,4] 切换到所需的键盘布局？
- c++ - 静态成员是否通过在 C++ 中为每个实例制作副本来实现？
- excel - 从行和电子邮件中复制详细信息
- python - 在 Highcharts 中通过循环添加系列的性能问题
- powershell - 在Powershell中增加字符串变量中的数字的最快/最简单的方法是什么？
- java - java.lang.NoSuchMethodError: org.springframework.util.StringUtils.matchesCharacter(Ljava/lang/String;C)Z
- javascript - 将活动类添加到当前元素 - 在多个 ID 和类之间