javascript - 单击时 2 个 div 之间的备用 z-index ？

Question

我不太擅长 JS，所以一直在尝试和错误来尝试找出如何让 2 个 div 在单击触发器(按钮)时交换 z-index。

我目前有 2 个抽屉，从技术上讲，它们是彼此叠置的，并从右侧滑出。单击“购买”时，#QuickShopDrawer 应打开，单击“购物车”或“添加到购物车”时，应打开#CartDrawer。

链接到我的test store .

到目前为止，我的代码正在以更高的 z-index 打开 #CartDrawer。

JS:

Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));

$('.js-drawer-open-right-two').click(function(){
  $(this).data('clicked', true);
});

if($('.js-drawer-open-right-two').data('clicked')) {
  //clicked element, do-some-stuff
  $('#QuickShopDrawer').css('z-index', '999');
} else {
  //run function 2
  $('#CartDrawer').css('z-index', '999');
}

this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};

我已经尝试过这个，这更符合我的要求，但它只触发一次？

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

任何帮助将不胜感激!

Answer 1

您需要在单击按钮时交换元素的z-index。另外，您可以在单击时禁用按钮，以便用户无法连续单击它。

Demo

$(document).ready(function() {
  $('#buy').on('click', function(e) {
    var myZindex = $('#QuickShopDrawer').css('z-index');
    $('#QuickShopDrawer').css('z-index', $('#CartDrawer').css('z-index'));
    $('#CartDrawer').css('z-index', myZindex);
    $(this).prop('disabled', true).siblings('button').prop('disabled', false);
  });

  $('#addToCart').on('click', function(e) {
    var myZindex = $('#CartDrawer').css('z-index');
    $('#CartDrawer').css('z-index', $('#QuickShopDrawer').css('z-index'));
    $('#QuickShopDrawer').css('z-index', myZindex);
    $(this).prop('disabled', true).siblings('button').prop('disabled', false);
  });

});

button {
  position: absolute;
  top: 150px;
  left: 0;
  clear: both;
}
#addToCart {
  margin-left: 50px;
}
.red {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  left: 20px;
  top: 20px;
  z-index: 1;
}
.green {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
  <div id="QuickShopDrawer" class="red">fdsafdsafdsa</div>
  <div id="CartDrawer" class="green">fdsafdsafdsa</div>
</div>
<button id="buy">Buy</button>
<button id="addToCart">Add To Cart</button>