javascript - 在 jQuery 中无限改变 z-index

Question

我对 jQuery 有点陌生，但我需要编写一个小型自定义图像旋转器。基本上我会有一小堆看起来像宝丽来的 .png 图片。旋转器需要将最上面的一个拉下来，将其向右移动，将 Z-index 设置为低于其他两个，然后将其移回……就像您浏览一堆图片时所做的那样。

大部分我认为我可以做到，但我不太明白的问题是我需要不断交换这 3 张图像的 Z-index(将顶部图像向右移动，将 z-index 重置为低于另外两个，往回走)

在 HTML 中我有以下内容:

<img src="images/polariod_1.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_2.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_3.png" width="255" height="260" alt="Singer" class="headerrightgraphic">

关于如何以一种优雅的方式更改这些 z-index 而无需一遍又一遍地硬编码，有什么线索吗？

Answer 1

与其更改 z-index，不如考虑为所有照片提供相同的 z-index，并按照它们需要显示的顺序将它们重新附加到父节点。这消除了对“无限”z 索引获取照片上方和下方内容的需求。

例如，如果用户可以单击一个将其拉到顶部，只需将其重新附加到父节点即可:

// assuming you have a handle to the element `photoElement`

photoElement.parentNode.appendChild(photoElement);