javascript - Z-Index 不适用于画廊

Question

http://gomocloud.com/ambassadorhi/homebuilder/2015/testing/testing.html

我想要做的是在选择时同时显示屋顶颜色和壁板颜色。

我已经为每个部分分配了不同的 z-index 级别。但是，如您所见，当我为房屋的壁板选择一种新颜色时，屋顶图像会恢复为默认颜色，即使我单击的是具有更高 z-index 的元素也是如此。

我什至尝试在 CSS 代码中从 position:absolute 切换到 position:relative。任何帮助将不胜感激。

这是一个JSFiddle .

Answer 1

您正在使用相同的输入控制屋顶和壁板。在这种情况下，这意味着当您单击屋顶时，壁板将转到默认壁板，反之亦然。

您也没有真正对 Z-index 做任何事情。所有屋顶的值为 10，所有壁板的值为 20(这无关紧要，因为屋顶无论如何都不与壁板重叠)。

如果你想使用 Z-index 来显示和隐藏，你应该使事件屋顶的 Z-index 高于所有其他屋顶，并对壁板做同样的事情。

为此，您需要 2 个变量。一个控制哪个屋顶处于事件状态，另一个控制哪个壁板处于事件状态。现在您一次只能控制其中一个，而另一个将默认为 DOM 树中较高的那个。