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

305
29 марта 2017, 16:47

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

Суть в том что мне нужно проверить если 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';    
    }
Answer 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; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="colorlikreviews">AAA</div> 
<button onclick="SwitchClass()">Click</button>

Answer 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");
READ ALSO
Ошибка в js Opencart 2.2

Ошибка в js Opencart 2.2

Помогите решите проблемуУстановил модуль Product Option Image при выборе опций в карточке появляется ошибка js и переключение не происходит:

381
Как редактировать объект данные в Local Storage?

Как редактировать объект данные в Local Storage?

Я хочу редактировать Local Storage объект данные полученных в "input" из Local Storage, в том самом "input", и после редактирования поместит обратноНикак не придумаю...

300
Модальное окно jquery

Модальное окно jquery

Пишу на aspnet mvc, создал модальное окно

327