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

Answer 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.

Answer 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

1. it tries to increment the value only after the assignment, which would give you an incorrect value anyway, but...
2. 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

Answer 3

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