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

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

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

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

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

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

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

Ответ 1

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

Ответ 2

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

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

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

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

EDIT:

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

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

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

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

Ответ 3

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

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

<tr class = "IN foo"/>

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

Ответ 4

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