Question

I’m sure the answer to this is simple, I’ve just been able to figure it out.

I have a simple click function which applies to any links in a list being clicked. When one is clicked, I want it to remove a class on a div, which is related to one of the links attributes. E.g:

// The link
<li><a href="#" title="example1">example1</a></li>

// The div
<div id="example1" class="selected"></div>

This is the kinda thing that I’ve tried, but it aint right:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + $(this().val).removeClass("selected");
});

Any help would be much appreciated! If anyone could also tell me the JavaScript equivalent of doing this too that would be a nice bonus!

Answer 1

Well you’re close:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + this.title).removeClass("selected");
});

For this sort of thing, the HTML5 “data-” attribute convention can be very handy. You’d change the markup as follows:

<li><a href="#" data-targetId="example1">example1</a></li>

Then in your code you can use the jQuery “.data()” method:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + $(this).data('targetId')).removeClass("selected");
});

That technique allows you to avoid “overloading” other attributes, as you’ve done with “title”. (That’s not necessarily a bad thing to do, of course, but sometimes you might want the “title” to be something meaningful, since it will after all show up when the mouse is positioned over the element.)