开发者

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'); 
    }); 
}); 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜