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.
$(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
Post a Comment