[javascript] Usuwanie klas zawartych w tablicy

Question

Cześć i czołem podpowie ktoś jak poradzić sobie z tym problemem?

Otóż próbuje za pomocą pętli sprawdzić, czy dany div posiada jedną z klas zawartch w tablicy, jeżeli ma powinien usunąć divowi tą klase i przejść do kolejnego.

Problem jest taki, że kod tak jakby losowo usuwa klasy kilku divom, raz jednemu, raz trzem.

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-gap: 6px;
}
.card{
    background: black;
    width: 250px;
    height: 250px;
}

.darkcyan{
    background: darkcyan;
}
.crimson{
    background: crimson;
}
.blue{
    background: blue;
}
.yellowgreen{
    background: yellowgreen;
}
.pink{
    background: pink;
}
.azure{
    background: rgb(5, 129, 230);
}
.unactive{
    background: gray;
    position: relative;
}
.unactive::before{
    content: 'UNACTIVE';
    color: white;
    text-shadow: 0 0 2px black;
    position: absolute;
    top: 125px;
    left: 84px;
}

var colorList = ['darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure', 'darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure'];
var colors = ['darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure', 'darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure'];
var cards = [...document.querySelectorAll('.card')];

function randomColors(){
    cards.forEach( card=>{
        let randomValue = parseInt(Math.random() * colorList.length);
        card.classList.add(colorList[randomValue]);
        colorList.splice(randomValue, 1);
    })
}

function resetGame(){
    let i = 0;
    cards.forEach( card=>{
        let color = colors[i];
        while(card.classList.value.includes(color)){
            card.classList.remove(color);
            i++;
        }
    } )
}

Nie wiem czy to jasno opisałem ale celem jest usunięcie każdemu divowi klasy zawartej w tablicy colors.

Answer 1

Musisz najpierw sprawdzać dla pojedynczej karty, czy nie posiada jakiejkolwiek klasy z listy colors. Jeżeli posiada to ją usuń. Ja to rozwiązałem tak, że zrobiłem foreacha po każdym kolorze i jeżeli zawiera któregoś z listy to usuwa daną klasę.

Tutaj jest rozwiązanie: https://jsfiddle.net/j2wq695f/2/

function resetGame(){
    cards.forEach(card=>{
    	colors.forEach(color => {
      	if(card.classList.contains(color)) {
        	card.classList.remove(color);
        }
      });
    });
}

 

Comments

Twój kod też nie działa do końca prawidłowo

---

Jak to? Zobacz co jest w tablicy colors

var colors = ['crimson', 'azure', 'crimson', 'blue', 'yellowgreen', 'azure'];

nie ma kolory darkcyan i pink, stąd wynika, że określone kwadraty mają stale losowy kolor. Dodaj te kolory, które mają być usuwane do tablicy colors i wtedy skrypt będzie działał prawidłowo, jeżeli rozchodzi się o te 2 kolory.

---

Rzeczywiście, nie wiem jakim cudem tam zabrakło tych kolorów

Answer 2

W tym przypadku dodajesz jako drugą klasę z kolorem. Więc wystarczy zrobić pętlę po elementach i usunąć drugą klasę.

function resetGame(){
 for(let i = 0; i < cards.length; i++ ){
	cards[i].classList.remove(cards[i].classList[1])
 }
}

 

Comments

A co w przypadku, gdy klasa z kolorem nie jest druga?

---

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<button id="losowanie">losowanie kolorów</button>
<button id="reset">reset</button>

.container{
   display: flex;
	 flex-wrap: wrap;
	justify-content: center;
}
.card{
	  margin:5px;
    background: black;
    width: 50px;
    height: 50px;
}
 
.darkcyan{
    background: darkcyan;
}
.crimson{
    background: crimson;
}
.blue{
    background: blue;
}
.yellowgreen{
    background: yellowgreen;
}
.pink{
    background: pink;
}
.azure{
    background: rgb(5, 129, 230);
}

const colorList = ['darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure', 'darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure'];
var colors = ['darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure', 'darkcyan', 'crimson', 'blue', 'yellowgreen', 'pink', 'azure'];
var cards = [...document.querySelectorAll('.card')];
 
function randomColors(){
    cards.forEach( card=>{
        let randomValue = parseInt(Math.random() * colorList.length);
        card.classList.add(colorList[randomValue]);
        // colorList.splice(randomValue, 1);
    })
}

function resetGame(arr1,arr2){
	arr1.forEach(el1=>{
		arr2.forEach(el2=>el2.classList.remove(el1))
	})
}
document.getElementById('losowanie').addEventListener('click',()=>randomColors())
document.getElementById('reset').addEventListener('click',()=>resetGame(colorList,cards))

 

---

Podziękował :)

Answer 3

Musisz zrobic cos na zasadzie

classes = ['class1', 'class2', 'class3', 'class4'];

$( "card" ).each(function( index ) {  
  if(hasClass(index, classes[i])) {
   $(this).removeClass('card');
}
});

 

Comments

Póki co unikam jquery, chce się dobrze javascripta wyuczyć, żeby mi potem w frameworkach typu vue było łatwiej

Dasz rade napisać to w czystym js?