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

js dodaj i usun klase

Fiszki IT
Fiszki IT
0 głosów
738 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 (164,420 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 (164,420 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 (164,420 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 (164,420 p.)
Dlaczego nie działa? Dopasowałeś kod pod siebie? Podaj konkretne informacje.

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

Podobne pytania

0 głosów
2 odpowiedzi 179 wizyt
pytanie zadane 20 lipca 2019 w JavaScript przez Allen Obywatel (1,010 p.)
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 28 lutego 2020 w HTML i CSS przez BlackCat_ Nowicjusz (240 p.)
0 głosów
1 odpowiedź 68 wizyt
pytanie zadane 27 czerwca 2018 w JavaScript przez Tomasz Ozi Orzech Początkujący (300 p.)
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

84,736 zapytań

133,542 odpowiedzi

295,952 komentarzy

56,001 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...