I’ve put together some simple test code, that makes use of some well-known pieces of scripting for handling classes.
One of those is a cross-browser compatible getElementsByClassName and the other is a group of [url=“http://snipplr.com/view/3561/addclass-removeclass-hasclass/”]hasClass, addClass and removeClass functions, to which I’ve added a toggleClass function too.
Here’s the guts of the rest of the code.
<h1>Tests</h1>
<p>
<input id="toggleok" type="button" value="Toggle OK">
<input id="togglefailed" type="button" value="Toggle Failed">
</p>
<div id="tests">
</div>
20 random tests are created.
function createRandomTests(target, max) {
var divs, i;
divs = document.createDocumentFragment();
for (i = 0; i < max; i += 1) {
divs.appendChild(createTestDiv(i));
}
target.appendChild(divs);
}
createRandomTests(document.getElementById('tests'), 20);
Each test being similar to the following HTML
<div id="test7" class="test ok">Test 7</div>
which are created with:
function createTestDiv(i) {
var div = document.createElement('div');
if (Math.random() * 100 > 50) {
addClass(div, 'ok');
} else {
addClass(div, 'failed');
}
div.id = 'test' + i;
div.appendChild(document.createTextNode('Test ' + (i + 1)));
return div;
}
and are then toggled with the likes of:
function toggleOk() {
var tests, i;
tests = document.getElementsByClassName('ok');
for (i = 0; i < tests.length; i += 1) {
toggleClass(tests[i], 'hide');
}
}
document.getElementById('toggleok').onclick = toggleOk;
Here’s the full test code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Toggle Tests</title>
<style type="text/css">
#tests { border: 1px solid black; border-bottom: none; }
#tests div { border-bottom: 1px solid black; }
.ok { background: lightgreen; }
.failed { background: red; }
.hide { display: none; }
</style>
</head>
<body>
<h1>Toggle Tests</h1>
<p>
<input id="toggleok" type="button" value="Toggle OK">
<input id="togglefailed" type="button" value="Toggle Failed">
</p>
<div id="tests">
</div>
<script type="text/javascript">
Object.prototype.getElementsByClassName = document.getElementsByClassName = document.getElementsByClassName || function(className) {
className = className.replace(/\\s+/g, ' ').replace(/^\\s|![A-Za-z0-9-_\\s]|\\s$/g, '').split(' ');
for (var i = 0, elements = this.getElementsByTagName('*'), elementsLength = elements.length, b = [], classNameLength = className.length, passed = true; i < elementsLength; i++, passed = true) {
for (var j = 0; j < classNameLength && passed; j++) {
passed = (new RegExp('(^|\\\\\\s)' + className[j] + '(\\\\\\s|$)', 'i')).test(elements[i].className);
}
if (passed) {
b.push(elements[i]);
}
}
return b;
};
</script>
<script type="text/javascript">
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function toggleClass(ele,cls) {
if (hasClass(ele,cls)) {
removeClass(ele, cls);
} else {
addClass(ele, cls);
}
}
</script>
<script type="text/javascript">
function createTestDiv(i) {
var div = document.createElement('div');
if (Math.random() * 100 > 50) {
addClass(div, 'ok');
} else {
addClass(div, 'failed');
}
div.id = 'test' + i;
div.appendChild(document.createTextNode('Test ' + (i + 1)));
return div;
}
function createRandomTests(target, max) {
var divs, i;
divs = document.createDocumentFragment();
for (i = 0; i < max; i += 1) {
divs.appendChild(createTestDiv(i));
}
target.appendChild(divs);
}
function toggleOk() {
var tests, i;
tests = document.getElementsByClassName('ok');
for (i = 0; i < tests.length; i += 1) {
toggleClass(tests[i], 'hide');
}
}
function toggleFailed() {
var tests, i;
tests = document.getElementsByClassName('failed');
for (i = 0; i < tests.length; i += 1) {
toggleClass(tests[i], 'hide');
}
}
document.getElementById('toggleok').onclick = toggleOk;
document.getElementById('togglefailed').onclick = toggleFailed;
createRandomTests(document.getElementById('tests'), 20);
</script>
</body>
</html>
