Clever Geek Handbook

How can I create a css attribute between two elements?

I am trying to make two elements exchange their z-index value. Here's what I have so far:

function zSwapper (beneathElement,underneathElement) {
    var beneathElementZ = $(beneathElement).css('z-index');
    var underneathElementZ = $(underneathElement).css('z-index');

    $(beneathElement).css({'z-index': underneathElementZ});
    $(underneathElement).css({'z-index': beneathElementZ});
}

But that doesn't work because as soon as I change the first z-index element, the second takes that value instead of the one at the beginning. Thus, both elements have the same z-index, instead of exchanging their values. Can this be solved?

EDIT: Well, as pointed out below, it looks like it actually works: http://jsfiddle.net/xGPx2/2/ so there is another problem with my code. Hope someone finds this helpful.

+3


source to share


3 answers


Your code should work fine, maybe it has more to do with css?
I checked your code, see jsFiddle



+2


source


Don't use object when setting css attribute, but two arguments .

function zSwapper (beneathElement,underneathElement) {
    var beneathElementZ = $(beneathElement).css('z-index');
    var underneathElementZ = $(underneathElement).css('z-index');

    $(beneathElement).css('z-index', underneathElementZ);
    $(underneathElement).css('z-index', beneathElementZ);
}


Check this example

+2


source


you can have separate classes that can be exchanged between two elements

0


source






More articles:


All Articles