JS newbie needs help with Jquery
I am trying to write a jquery function but am brand new to jquery. Here is my very simple function, which I want to clear all of the links to the unselected class, except for the selected link:
$(function()
{
$('li a').click(function()
{
$('li a').addClass('unselected');
$(this).addClass('selected');
});
});
How do I do this? And then how do I deselect all of the ones except for those with a specific name attribute? Here is an example of a link:
<li><a id="106" name="wavelength" href="#">10.6 &m开发者_JAVA百科icro;</a></li>... set of links
and another set of links
<li><a id="10watt" name="power" href="#">10 watt</a></li>....
In response to your comment on one of the other answers (which is now deleted):
These li a tags are in five columns. How do I deselect only the ones in the column, while leaving the others selected? I have tagged with my links with name attributes to group them
You could group your <li>
links by the <ul>
they are contained in!
You can use jQuery to search the <a>
's parents for the .closest('ul')
then .find('li a')
within that:
// best practice says you should cache the result of this search
// so you don't need to find it again
var $links = $('li a');
// attach a click function to the links
$links.click(function() {
// again cache it... we will use it more than once.
var $this = $(this);
// remove selected from everything - add unselected
$this.closest('ul').find('li a').removeClass('selected').addClass('unselected');
// remove unselected from this link and add selected
$this.removeClass('unselected').addClass('selected');
});
Since you said the link groups share a name
attribute take a look at this code:
var $links = $('li a');
$links.click(function() {
// store ourself as a jquery object, and get our name:
var $this = $(this), myname = $this.attr('name');
// filter $links to obtain the ones that share myname:
$links.filter(function() {
// we can use the DOM element "this.name" instead of $(this).attr('name')
// to save some time here:
return this.name == myname;
}).removeClass('selected').addClass('unselected');
$this.removeClass('unselected').addClass('selected');
});
As far as finding one with a particular name attribute check out the Attribute Equals Selector which looks like this:
$('li a[name=wavelength]');
$(function() {
var $a = $('li a');
$a.click(function() {
$a.removeClass('selected').not(this).addClass('unselected');
$(this).addClass('selected');
});
});
If you want to target links with a specific name, one of the possible selectors is a[name='somenamehere']
.
In the example, this would suffice:
$a.filter("[name='somenamehere']")
(You might want to implement the attribute selector differently, depending on what you want to do)
Also, it might be a good idea if you did away with the "unselected" class. I assume you are using it for styling. If so, give all the links a style, then give .selected links styling on top of their original style:
.menu a, .menu a:visited {
color: #FF0000;
text-decoration: none;
}
.menu a.selected {
font-weight: bold;
}
You were almost there... :) Try this:
$(function()
{
$('li a').click(function()
{
$("li a[name!='wavelength']").addClass('unselected');
$(this).removeClass('unselected');
$(this).addClass('selected');
});
});
精彩评论