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

js dodaj i usun klase

VPS Starter Arubacloud
0 głosów
1,349 wizyt
pytanie zadane 18 lipca 2016 w JavaScript przez Alterwar Dyskutant (7,650 p.)

Witam,

mam taki kod :

var labels = document.getElementsByTagName("label"),
len = labels.length;

for (var i = 0; i < len; i++) 
{
  labels[i].id = "label" + i;
}


var inputlength = document.getElementsByTagName("input"),
leninpt = inputlength.length;

for (var i = 0; i < leninpt; i++) 
{
  inputlength[i].id = "input" + i;
}


document.getElementById("go").onclick = function(go)
{
    alert("asdasdas");

    for (var p3 = 0; p3 <= 60; p3+=3)
    {

	    if(document.getElementById('input'+p3).checked == true)
		{
			var newposit = document.getElementById('label'+p3);
			newposit.classList.add("red", "brown");
			console.log(p3);
			
		}

	}
}

 

Czy może mi ktoś powiedzieć jakim sposobem usuwać poprzednią klasę? Mam kilkadziesiąt pól i mogę zaznaczyć jedynie 3 pola w bok. Załóżmy zaznaczam input nr 3 i dopisuję mi on klasę brown i red. I ma też usunąć klasę z inputa o nr1. Próbowałem class remove jednak bez skutku. Jedynie jeśli podać id na sztywno czyli "label0" klasa się usunie, jednak jeśli podaję 'label'-p3 nie działa.

komentarz 18 lipca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Co masz na myśli pisząc "poprzednią klasę"?

W kodzie nie widzę, abyś próbował usuwać klasy.

Możesz sobie wyświetlić, jakie klasy zawiera dany tag poprzez element.classList; i klasy tutaj są numerowane jak w tablicy. Czyli np.:

HTML

<div class="first-class orange blue"></div>

JavaScript

var div = document.querySelector('div').classList; // ['first-class', 'orange', 'blue'];
console.log(div.classList[1]); // 'orange'

Ustaw sobie IF, że jeśli wystąpi dana klasa, to ją usuwasz.

komentarz 18 lipca 2016 przez Alterwar Dyskutant (7,650 p.)
Dzięki za odpowiedź. Problem leży w tym, że klasy dodaje dynamicznie. Mam załóżmy 10 checboxów. Pierwszy checkbox ma wartość true. Mogę zaznaczać tylko checkboxy większe o 3 pola czyli: ch1, ch2, ch3, ch4, ch5, ch6, ch7, ch8, ch9, ch10.

Założmy że mam klasę act.

I teraz taki problem. Jeśli ch1 = true(jest zaznaczony).class(act) wtedy mogę zaznaczyć ch4. Ch4 przyjmuję klasę act, a ch1 tą klasę traci. No i znowu. Jeśli ch4 = true(act) wtedy ch7 przyjmuję .act, a ch4 traci klasę.
komentarz 18 lipca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Z tego co rozumiem, to możesz próbować w poniższy sposób, ale to łopatologiczny kod:

// chk1 = checkbox nr1
// chk4 = checkbox nr4
// act = jakas klasa

if (chk4.checked)
{
   chk1.classList.remove('act');
   chk4.classList.add('act');
}
komentarz 18 lipca 2016 przez Alterwar Dyskutant (7,650 p.)
no właśnie chciałbym tego uniknąć ze względu na to, że podałem urposzczony przykład a kombinacji występuję dużo więcej i dużo więcej pól, ale dzięki za pomoc :)
komentarz 18 lipca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Bardziej dynamiczny skrypt, hmm... Spróbuj w ten sposób, tylko sobie podmień elementy:

var nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var eachThird = [];

eachThird = nums.filter(function(num){
  return num === 1 || (num - 1)%3 === 0
});

for (var i = 0, len = eachThird.length; i < len; i++)
{
  if ( (chk + eachThird[i]).classList.contains('act') && eachThird[i] !== 1 )
   // ALBO
  if (  (chk + eachThird[i]).checked && eachThird[i] !== 1 )
  {
     (chk + eachThird[i--]).classList.remove('act');
     (chk + eachThird[i]).classList.add('act');
  }
}

 

Czy o takie coś w ogóle Ci chodzi?

komentarz 18 lipca 2016 przez Alterwar Dyskutant (7,650 p.)
Dzięki, ale niestety nie działa w moim przypadku.
komentarz 19 lipca 2016 przez ScriptyChris Mędrzec (190,190 p.)
Dlaczego nie działa? Dopasowałeś kod pod siebie? Podaj konkretne informacje.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
1 odpowiedź 225 wizyt
0 głosów
2 odpowiedzi 304 wizyt
pytanie zadane 20 lipca 2019 w JavaScript przez Allen Obywatel (1,010 p.)
0 głosów
1 odpowiedź 253 wizyt
pytanie zadane 7 listopada 2021 w C i C++ przez Eniggme Nowicjusz (230 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...