JS - zmiana z-index diva na 0 i dodanie wartości 1 kiedy jest aktualnie wybrany.

Question

Hej, mam mały problem ze skryptem, który miał działać tak: 

Wybieram z menu opcję 1, po czym element podłączony do niego przez id zmienia wartość z-index na 1, po czym klikając kolejną opcję, przykładowo 3, opcja 1 znowu ma z-index 0, a opcja 3, z-index 1.

Nici jednak z moich planów, ponieważ kiedy klikam na którąś z opcji, z-index 1 jest nadawane dla wszystkich elementów, a nie tylko dla wybranego.

Czy ktos moze mnie naprowadzic, jak dodawac klasę elementowi przy równoczesnym zabraniu klasy innemu elementowi? 

 

html menu, które po kliknięciu na daną opcję rozmiaru, ma zmieniać z-index divom z 

     <div class="sizes" id="mieszkanie1"> 
                                <a class="rozmiar">49,02m²</a> 
                                <a class="rozmiar">69,96m²</a> 
                                <a class="rozmiar">102,07m²</a> 
                                <a class="rozmiar">114,60m²</a> 
            </div>  
                <div class="oferty_skotniki">
            <div class="mieszkanie zind_1 ind_0" id="mieszkanie12">sdfadsfdasfdsfds</div>
            <div class="mieszkanie zind_2 ind_0" id="mieszkanie2">sfadsfdsaf</div>
            <div class="mieszkanie zind_3 ind_0" id="mieszkanie3">sadfdsafdsaf</div>
            <div class="mieszkanie zind_4 ind_0" id="mieszkanie4">sadfdsafdsaf</div>
                </div>
            </div>  
        </div>

js do wszystkiego: 

var rozmiarek = document.querySelectorAll(".rozmiar");

var mieszkanko = document.querySelector(".mieszkanie");

rozmiarek.forEach(function(rozmiarek) {
    rozmiarek.addEventListener("click", function() {
       if(mieszkanko.classList.contains('ind_0')){
        mieszkanko.classList.add('ind_1');
        mieszkanko.classList.remove('ind_0');
      }
});
});

 

Answer 1

Wybieram z menu opcję 1, po czym element podłączony do niego przez id zmienia wartość z-index na 1

Gdzie to podłączenie?

 

Comments

Ememm, pisałem to dosyć szybko i wcześniej nie było podłączenia przez js, tylko z id przez target w css ale fakt, teraz działa to dzieki ifowi w js.

---

czyli poradziłeś sobie?

---

Można skojarzyć pary za pomocą atrybutu data.

<a href="" class="link" data-id="jeden">jeden</a>
<a href="" class="link" data-id="dwa">dwa</a>
<a href="" class="link" data-id="trzy">trzy</a>
<a href="" class="link" data-id="cztery">cztery</a>
<div id="jeden">jeden</div>
<div id="dwa">dwa</div>
<div id="trzy">trzy</div>
<div id="cztery">cztery</div>

div{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
	text-align: center;
	line-height: 100px;
	color:#fff;
}

const link = document.querySelectorAll(".link");
const div = document.querySelectorAll("div");
link.forEach(function(el){
	el.addEventListener("click",function(e){
		e.preventDefault();
		div.forEach((el)=>{
			el.style.zIndex = "0";
		})
		document.getElementById(e.target.dataset.id).style.zIndex="1";
	})
})

 

Answer 2

Nici jednak z moich planów, ponieważ kiedy klikam na którąś z opcji, z-index 1 jest nadawane dla wszystkich elementów, a nie tylko dla wybranego.

Wydaje mi się, że to dlatego:

var mieszkanko = document.querySelector(".mieszkanie");

 Pobierasz elementy z klasą mieszkanie, czyli potem działasz(dodajesz/usuwasz) na wszystkich elementach.

Swoją drogą polecam zapoznać się z tym materiałem 

Comments

Ok, sposobu na pobranie osobno każdego elementu z tą klasą szukałem cały dzień, nici, czy pętla po divach z klasą mieszkanie będzie tu kluczem? :/

 

Ps, dzięki za materiał o zmiennych, na pewno się przyda w przyszłosci