setting z-index dynamically with JS

Question

I would like to change z-index on click on the icon- evry time user clicks the icon the index-z is +1, but my code doesn't work:

  $(document).on('click', '.icon-layer-up', function() { 
      console.log($(this).parent(".ui-wrapper").css("z-index"));
      var currentIndex = $(this).parent(".ui-wrapper").css("z-index"); 
      if ( currentIndex = "auto" ) {
        currentIndex = 0;
      }
      var num = currentIndex++;
       $(this).parent(".ui-wrapper").css("z-index", num );
    });

Mike Edwards · Accepted Answer · 2013-10-17 01:42:37Z

2

There is a big difference between

if( currentIndex = "auto" ) {

and

if( currentIndex == "auto") {

The first performs an assignment that you don't intend, always returning "auto" as the result and the if statement always runs, resetting currentIndex to 0.

404 is also correct, you don't want to us "num++" in this situation for 2 reasons

it tries to increment the value only after the assignment, which would give you an incorrect value anyway, but...
in your case "num" is actually a string because of how it was acquired. You'll need to convert it to a number to do addition: parseInt(num) + 1

edited Oct 17, 2013 at 1:42

answered Oct 17, 2013 at 1:35

Mike Edwards

3,77120 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

404 Not Found · Accepted Answer · 2013-10-17 01:33:01Z

1

Your problem is var num = currentIndex++;.

currentIndex++ will increment currentIndex to currentIndex + 1, but it will return the original value, so num gets assigned to the original value of currentIndex. Just use var num = currentIndex + 1.

It's not great coding practice to use ++ if all you want to do is add 1. If you're just adding, use + 1.

answered Oct 17, 2013 at 1:33

404 Not Found

3,6752 gold badges32 silver badges36 bronze badges

1 Comment

Tushar Gupta - curioustushar Over a year ago

in that case use var num = ++currentIndex;. increment + assign value

Shea · Accepted Answer · 2013-10-17 01:53:29Z

The first thing that I noticed with your code, which may or may not be a problem, is that you are missing the data parameter for your jQuery on event. You are also going to want to apply your event to document.body rather than document.

$(document.body/*changed*/).on('click', '.icon-layer-up', {}/*added*/, function() {

Next, you are always setting currentIndex to auto and then to 0, rather than checking to see if it equals auto.

if ( currentIndex ==/*fixed*/ "auto" ) {

Furthermore, you are originally setting currentIndex as a string, which will only convert the string to a number, when trying to increment it, the way you are. You must first attempt to convert it to a Number, check to make sure it was a Number, and then increment it.

So altogether the fixed code should be:

  $(document.body).on('click', '.icon-layer-up', {}, function() { 
      console.log($(this).parent(".ui-wrapper").css("z-index"));
      var currentIndex = Number($(this).parent(".ui-wrapper").css("z-index")); 
      if ( isNaN(currentIndex) ) { // if is not a number, set it to 0
        currentIndex = 0;
      }
      var num = currentIndex++;
       $(this).parent(".ui-wrapper").css("z-index", num );
    });

Next, make sure you read about z-index, and understand how it works. z-index will not be applied to elements of a default position of static. Try setting your elements to position: relative;, to which you are trying to apply z-index.

References for z-index:
Understanding CSS z-index
Adding z-index

Collectives™ on Stack Overflow

setting z-index dynamically with JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related