Question

I have a site I’m building in PHP, and have a page that loads data dynamically from mySQL. It uses list items that the user clicks on, causing a _POST to the database, thus not allowing me to customize the CSS of the page they’re now seeing. I’m wondering if there’s a way to dynamically set the css class of the <li> they’ve clicked, as to highlight it. Problem is, if they press another list item, I have to un-highlight the old one. Anyone have input on the best way to go about this?

Answer 1

Assuming you’re submitting the POST requests via AJAX, add something like this (I’m going to assume you’ve already got the AJAX part out of the way)

// var context is a previously identified container for the list items

var items = context.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        // do AJAX stuff

        // remove the "highlight" class from all list items
        for (var j = 0; j < items.length; j++) {
            var classname = items[j].className;
            items[j].className = classname.replace(/\bhighlight-class-name\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight-class-name';
    }, false);
}

Demo here – http://jsfiddle.net/jYdMB/