Javascript 单击两个div之间的交替z索引？

我对JS不是很在行，所以我一直在尝试用试错法来找出如何让2个div在点击触发器（按钮）时交换z-index

我现在有两个抽屉，从技术上说，它们是相互叠放的，从右边滑出。单击“购买”时，应打开#QuickShopDrawer；单击“购物车”或“添加到购物车”时，应打开#CartDrawer

链接到我的

到目前为止，我的代码是以更高的z索引打开顶部的#CartDrawer

JS:

我试过这个，这是我想要的，但它只发射了一次

$('.js-drawer-open-right-two').click(function() {
  var i = $(this).index();
  $('.drawer--right').hide();
  $('.drawer--right-two' + (i+1)).show();
});

---

任何帮助都将不胜感激

您需要在单击按钮时交换元素的

z-index

。此外，您还可以

禁用单击时的按钮，以便用户无法连续单击它



$（文档）.ready（函数（）{
$（“#购买”）。在（'click'，函数（e）{
var myZindex=$（'#QuickShopDrawer'）.css（'z-index'）；
$（'#QuickShopDrawer'）.css（'z-index'，$（'#CartDrawer'）.css（'z-index'））；
$（'#CartDrawer'）.css（'z-index'，myZindex）；
$（this）.prop（'disabled'，true）.同胞（'button'）.prop（'disabled'，false）；
});
$（'addToCart'）。在（'click'，函数（e）上{
var myZindex=$（'#CartDrawer'）.css（'z-index'）；
$（'#CartDrawer'）.css（'z-index'，$（'#QuickShopDrawer'）.css（'z-index'））；
$（'#QuickShopDrawer'）.css（'z-index'，myZindex）；
$（this）.prop（'disabled'，true）.同胞（'button'）.prop（'disabled'，false）；
});
});
按钮{
位置：绝对位置；
顶部：150px；
左：0；
明确：两者皆有；
}
#addToCart{
左边距：50像素；
}
瑞德先生{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：红色；
左：20px；
顶部：20px；
z指数：1；
}
格林先生{
位置：绝对位置；
宽度：100px；
高度：100px；
背景颜色：绿色；
z指数：2；
}

fdsafdsafdsa
fdsafdsafdsa
购买
添加到购物车
创建一个与相关代码相关的快速小提琴。可能重复感谢您的回复这似乎不起作用。为什么？更新答案以使用您的
选择器
。我这样做了，但没有任何运气。谢谢，您认为这意味着我的选择器一定是错的吗？是的，相应地更新您的
选择器
，例如
.js抽屉打开右两个
$('.js-drawer-open-right-two').click(function() {
  var i = $(this).index();
  $('.drawer--right').hide();
  $('.drawer--right-two' + (i+1)).show();
});