Как проверить что class = “X” и заменить X на Y?

#javascript #jquery

Всем привет, подскажите пожалуйста где ошибка

Суть в том что мне нужно проверить если class=like-r где id="colorlikreviews" , то
заменить class=like-r на class=like-rs, если нет то указать class=like-r 

    if($("#colorlikreviews").className == 'like-r'){
        document.getElementById("colorlikreviews").className = 'like-rs';
    }else{
        document.getElementById("colorlikreviews").className = 'like-r';    
    }

    

Ответы

Ответ 1

if ($("#colorlikreviews").hasClass("like-r")) {
  $("#colorlikreviews").removeClass("like-r");
  $("#colorlikreviews").addClass("like-rs");
} else {
  $("#colorlikreviews").addClass("like-r");
}


А ошибка, скорее всего, в id элемента: "colorlikereviews".

Update

Ух-ты! Оказывается, toggleClass хитрее, чем я думал.



function SwitchClass() {
    if ($("#colorlikreviews").hasClass("like-r")) {
      $("#colorlikreviews").toggleClass("like-r like-rs");
    } else {
      $("#colorlikreviews").addClass("like-r");
    }  
}
.like-r {
  width:200px;
  height:200px;
  background:red;
  color:yellow;
}

.like-rs {
  width:200px;
  height:200px;
  background:green;
}

AAA



Ответ 2

Как проверить что class = “X”


Проверять атрибут class на равенство - плохая идея.
class нужно рассматривать как список классов(с неопределённым порядком).
Для работы с этим списком у DOM элементов есть специальный объект Element.classList.  

Как проверить, что у элемента есть class X?

Вот так:  

if (el.classList(hasClass('X'))) {
  // ...
}



  и заменить X на Y?  


Метода для подобной замены в classList нет.
Но мы всегда можем удалить один и добавить другой класс:  

el.classList.remove('X');
el.classList.add('Y');




В примерах выше, el - DOM Element, субъект манипуляций.
Применительно к коду в вопросе это:  

var el = document.getElementById("colorlikreviews");