如何设置多个元素的z索引，并在modal中使用javascript动态更新它们？

当用户单击任何

div

modal打开并在modal内部将所有div组合在一起并作为滑块工作时，我编写了一个代码。但是我想在用户单击的div上给出最高的

z-index

，然后根据最高的

z-index

div携带下一个和上一个按钮功能

当前，当我们单击div时，会出现模式，并在最后一张幻灯片上设置最高的z索引，然后“下一步”和“上一步”按钮会相应地工作

代码如下：-

$（函数（）{
$（'.gallery wrapper'）。每个（函数（）{
变量$this=$（this），
galleryPopup=$this.find（'.galleryPopup'），
prevBtn=$this.find（'.prev btn'），
nextBtn=$this.find（'.next btn'），
posts=$this.find（'.post'），
电流=0
//-----单击任何项目链接打开弹出窗口
// --------------------------------------------
$this.find（'.item link'）。on（'click'，函数（事件）{
event.preventDefault（）；
galleryPopup.fadeIn（）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//-----单击关闭链接关闭弹出窗口
// --------------------------------------------
$this.find（'.close link'）。on（'click'，函数（事件）{
event.preventDefault（）；
galleryPopup.fadeOut（）；
$（'body，html'）.css（'overflow'，'initial'）；
});
//-----弹出滑块脚本
// --------------------------------------------
var galleryWrapper=document.querySelector（“.gallery wrapper”）；
var controls=galleryWrapper.querySelector（“.button holder”）；
var els=galleryWrapper.querySelectorAll（'.post'）；
变量顺序=对象键（els）；
var cn；
var highestElm；
函数setZIndex（）{
对于（顺序中的变量i）els[顺序[i]]。style.zIndex=i；
}
函数findHighestZIndex（elem）{
var最高=0；
var highestElement=null；
var elems=document.getElementsByClassName（elem）；
对于（变量i=0；ihighest））{
最高=锌指数；
高级元素=元素[i]；
}
}
返回高度元素；
}
//将单击处理程序分配给父级
controls.onclick=函数（e）{
var elem=findHighestZIndex（‘post’）；
var节点=Array.prototype.slice.call（document.querySelector（'.collection'）.children）；
highestElm=数量（nodes.indexOf（elem））；
if（！（cn=（e.target.className.match（/prev btn | next btn/）| |[false]）[0]）返回；
如果（cn==“上一个btn”）{
if（highestElm==0）{
var lastChildElem=galleryWrapper.querySelector（'.collection'）.lastElementChild；
lastChildElem.classList.add（'animate-out'）；
setTimeout（函数（）{
lastChildElem.classList.remove（'animate-out'）；
}, 300);
}否则{
els[highestElm-1].classList.add（'animate-out'）；
setTimeout（函数（）{
els[highestElm-1].classList.remove（'animate-out'）；
}, 300);
}
order.unshift（order.pop（））；
setTimeout（函数（）{
setZIndex（）；
}, 400);
}
如果（cn==“下一个btn”）{
els[highestElm].classList.add（'animate'）；
setTimeout（函数（）{
els[highestElm].classList.remove（'animate'）；
setZIndex（）；
}, 300);
order.push（order.shift（））；
setZIndex（）；
}
}
setZIndex（）；
});
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
溢出-x：隐藏！重要；
}
.多媒体资料弹出窗口{
显示：无；
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.8）；
宽度：100%；
身高：100%；
}
.收藏{
最大宽度：300px；
保证金：0自动；
透视图：1500px；
位置：绝对位置；
左：50%；
顶部：120px；
转化：translateX（-50%）；
宽度：100%；
}
.邮政{
位置：绝对位置；
左：0；
排名：0；
宽度：300px；
高度：400px；
背景：橙色；
边框：5px实心#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字号：4rem；
转变