CODEWITHSUNDEEP
javascriptz-index
user13670138
user13670138

Reputation: 311

switch z-index change on click (vanillaJS)

I'm trying to change the z-index on the clicked item on vanilla JS. When a click event happens, the clicked item should come front. There are only two divs atm, but there will be more. I'm storing the last clicked item, so that if new click event happens the last clicked item have less z-index. But it doesn't seem to work.(both of items are position relative) Any help would be appreciated.

<div class="post" data-name="post" draggable="true">1</div>
<div class="post" data-name="post" draggable="true">2</div>

const a = new A()

memoSection.addEventListener('click', ({target})=>{
    switch(target.dataset.name){
          case "post":
                let clickedItem ="";
                a.bringFront(clickedItem)
                break;
})

class A{
    constructor(){
        this.selected = null
    }


    bringFront(clickedItem){
        this.selected = clickedItem; //store the previously clicked element
        if(!clickedItem.style.zIndex == 10 || !clickedItem.style.zIndex){
            this.selected.zIndex = 0
            clickedItem.style.zIndex = 10
        } else { 
            this.selected.zIndex = 10
            clickedItem.style.zIndex = 0 }
    }

}

Upvotes: 0

Views: 256

Answers (1)

ikiK
ikiK

Reputation: 6532

I don't understand what your code was trying to do, but here is example how to get desired effect:

document.querySelectorAll('.post').forEach(item => {
//get all elements with class .post

  item.addEventListener('click', event =>  {
  // add Event Listener to each
    document.querySelectorAll('.post').forEach(el => {
      el.style.zIndex = "0";
    })
    // when clicked fetch all again and set all back to 0

    item.style.zIndex = "10";
    //set clicked only to 10
    console.clear()
    console.log(item.innerHTML);

  })
})
.post:first-of-type {
  position: absolute;
  background-color: blue;
  left: 100px;
  top: 50px;
  width: 150px;
  height: 150px;
  z-index: 0;
}

.post {
  position: absolute;
  background-color: red;
  left: 25px;
  top: 50px;
  width: 150px;
  height: 150px;
  z-index: 0;
}
<div class="post" data-name="post" draggable="true">1</div>
<div class="post" data-name="post" draggable="true">2</div>

Upvotes: 1

Related Questions