Оператор JQuery if / else, соответствующий CSS-имени с подстановочными знаками

Question

Я пытаюсь написать оператор if / else в JQuery, который может изменить класс элемента путем сопоставления 'IN' или 'OUT' (в данном случае).

Например, у меня есть несколько <DIV> с class='IN-something' ИЛИ class='OUT-something'.

Нижеследующее сработало бы, если бы я знал точный класс CSS, но все, что я буду знать, это то, что он содержит IN или OUT.

Так что-то вроде этого:

if ($(jRow).hasClass('IN-*'))
{jRow.attr( "class", "OUT-foo" );}
else  
{jRow.attr( "class", "IN-foo");}

Идеи? Спасибо!

Answer 1

if ($(jRow).attr('class').indexOf('IN-') !== 1)
  {jRow.attr( "class", "OUT-foo" );}
else  
  {jRow.attr( "class", "IN-foo");}

Answer 2

Вы можете использовать attribute-contains-prefix-selector ^{(документы)} , если это будет полное значение класса (или, по крайней мере, это первоекласс) .

if ($(jRow).is('[class |= IN]')) {

При этом также используется метод is() ^{(документы)} , чтобы определить, если jRowявляется совпадением.

Нажмите здесь, чтобы проверить рабочий пример. ^(jsFiddle)

---

РЕДАКТИРОВАТЬ:

Если вы решили, что вы не будете знать, что такое foo, и вам нужно сохранить его, я бы сделал что-то вроде этого:

jRow.attr('class', function(i,cls) {
    return cls.indexOf('IN') > -1 ? cls.replace('IN','OUT') : cls.replace('OUT','IN');
});

Вы можете передать функцию в качестве второго аргумента методу attr() ^(docs) .Эта функция имеет 2 параметра.Первый - это текущий индекс в итерации.Второе - это текущее значение атрибута.

Возвращаемое значение - это значение, которое будет установлено.

Answer 3

Используйте данные jQuery для хранения «IN» или «OUT» или добавьте свой собственный атрибут с именем, соответствующим бизнес-логике, которое говорит «IN» или «OUT». Настоящая проблема здесь - это объединение имен классов.

Вы также можете выделить IN и OUT и использовать несколько классов.

<tr class = "IN foo"/>

if( $obj.hasClass("in") ){ $obj.removeClass("in").addClass("out") }

Answer 4

var class = $(jRow).attr('class');
if (class.search("IN\-.*")) {
    jRow.attr( "class", "OUT-foo" );
}
else {
    jRow.attr( "class", "IN-foo");
}