jQuery Change Class

Toggle Event 사용시 AAA 로 명명된 클래스를 BBB 로 바꾸고 싶을 때가 있다.

1
$('#id').removeClass('AAA').addClass('BBB');

보통 이런 방식으로 사용하는데, alterClass 함수를 곁들이면 더 나이스하게 바꿀 수 있다.

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
@author https://gist.github.com/peteboere/1517285
*/
$.fn.alterClass = function (removals, additions) {
var self = this;

if (removals.indexOf('*') === -1) {
// Use native jQuery methods if there is no wildcard matching
self.removeClass(removals);
return !additions ? self : self.addClass(additions);
}

var patt = new RegExp(
'\\s' +
removals.replace(/\*/g, '[A-Za-z0-9-_]+').split(' ').join('\\s|\\s') +
'\\s',
'g'
);

self.each(function (i, it) {
var cn = ' ' + it.className + ' ';
while (patt.test(cn)) {
cn = cn.replace(patt, ' ');
}
it.className = $.trim(cn);
});

return !additions ? self : self.addClass(additions);
};

예제

1
2
3
4
// AAA to BBB
$('#id').alterClass('AAA', 'BBB');
// AAA-12, BBB-13 to AAABBB
$('#id').alterClass('AAA-* BBB-*', 'AAABBB');

**asterisk(*)**를 이용해 여러 개의 클래스를 한꺼번에 원하는 클래스로 변경할 수 있다.

여담

jQuery UI 를 사용 중이라면, .switchClass를 사용하면 된다.