SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.
How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';
...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');
liValue =
document.createTextNode(titleTrackElems.item(j).childNodes[0].nodeValue);
li.appendChild(liValue);
a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };
this.className;
And then ask about "this" and the issue that will arise from it.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://
www.JavascriptToolbox.com/bestpractices/
Hey Randy,
I've try it, but doesn't seem to work?
What is the issue that will arise from it?
Thanks
Marco
Sorry, just try it again, and it does work! But, whenever i click on a
link the 'here' class applies correctly but if i click again on
another link the class also applies (wich makes sense)
Im trying to highlight only the one selected. Is that the issue you
were talking about?
I don't think so - I think Randy was expecting you to discover more
about a function's this keyword.
Anyhow, what you want to do is to remove the classname from the last
link and add it to the current link. You can use a global variable to
do that, or you can remove the class from all the links and add it to
just the last one. Below is some stuff that does that, doing it
properly likely takes more code than you thought. Tested in Safari
and Firefox:
// Modified trim from clj FAQ to also remove multiple spaces
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,'').replace(/\s+/,' ');
}
// Utility function namespace
var xU = xU || {};
// Add a className
xU.addClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
if (!re.test(el.className)) {
el.className += (' ' + className).trim();
}
}
// Remove a className
xU.removeClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
el.className = (el.className.replace(re, ' ')).trim();
}
// See if el has className
xU.hasClassname = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
return (re.test(el.className));
}
// Return an element by tagName. If el's tag name isn't
// tagName, search up DOM tree. Return the first match
// or null if none found.
xU.upToTagname = function (el, tagName){
while (el.parentNode && el.tagName.toLowerCase() != tagName) {
el = el.parentNode;
}
return (el.tagName &&
el.tagName.toLowerCase() == tagName)? el : null;
}
// Highlight the last A element that was clicked on
function highLightLastLink(e){
var e = e || window.event;
var tgt = e.target || e.srcElement;
// If can't find A, or already has className, return
if ( !(tgt = xU.upToTagname(tgt, 'a')) ||
xU.hasClassname(tgt, 'red')) {
return;
}
// Remove className from any A that has it
var aElements = document.getElementsByTagName('a');
var i = aElements.length;
while (i--){
xU.removeClass(aElements
, 'red')
}
// Add className
xU.addClass(tgt, 'red');
}
window.onload = function(){
document.body.onclick = highLightLastLink;
}
