• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
493 wizyt
pytanie zadane 7 czerwca 2019 w JavaScript przez starnaw1998 Początkujący (290 p.)

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

 

2 odpowiedzi

+1 głos
odpowiedź 8 czerwca 2019 przez pablop76 VIP (123,460 p.)
wybrane 10 czerwca 2019 przez starnaw1998
 
Najlepsza

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

Gdzie to podłączenie?

 

komentarz 8 czerwca 2019 przez starnaw1998 Początkujący (290 p.)
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.
komentarz 8 czerwca 2019 przez pablop76 VIP (123,460 p.)
czyli poradziłeś sobie?
komentarz 8 czerwca 2019 przez pablop76 VIP (123,460 p.)

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





 

+1 głos
odpowiedź 7 czerwca 2019 przez mb-dir Mądrala (6,710 p.)

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 

komentarz 7 czerwca 2019 przez starnaw1998 Początkujący (290 p.)
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

Podobne pytania

0 głosów
1 odpowiedź 676 wizyt
pytanie zadane 27 lutego 2019 w JavaScript przez zerakot Obywatel (1,870 p.)
0 głosów
1 odpowiedź 375 wizyt
pytanie zadane 6 lipca 2022 w JavaScript przez zerakot Obywatel (1,870 p.)
0 głosów
1 odpowiedź 330 wizyt

93,093 zapytań

142,053 odpowiedzi

321,490 komentarzy

62,435 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...