js dodaj i usun klase

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?