javascript - Alternate z-index between 2 divs on click? -


i'm not great js been using trial , error try , figure out how 2 divs swap z-index on click of trigger (button).

i have 2 drawers technically on top of each other , slide out right. on click of 'buy' #quickshopdrawer should open , on click of 'cart' or 'add cart' #cartdrawer should open.

link test store.

my code far making open #cartdrawer on top higher z-index.

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)); }; 

i've tried more of want it's firing once?

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

any appreciated!

you need swap z-index of elements on button click. also, can disable button on click user cannot click continiously.

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 cart</button>


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -