Basic JavaScript/jQuery: how to return variable

Question

I've had a look around & can't see an answer to this, I'm a bit of a novice with JS so bear with me!

I'm working on a small site design which uses the Coda style slider from jQuery4Designers. Part of the design is to have an underscore prefixed to the active navigation link. So I've attempted to by creating a variable and then updating the existing function in the JS for the slider. Now this works:

var activeLink = $('#nav li a.selected').text();

// handle nav selection
function selectNav() {
    $(this)
        .parents('ul:first')
            .find('a')
                .removeClass('selected')
                .text(activeLink) //this ensures the non-active link has no underscore
            .end()
        .end()
        .addClass('selected')
        .text("_" + activeLink); //this adds the underscore to the active link
}

The problem I have is that this makes every link the original active link I believe the varible isn't updated to display the new a.selected. So If my first active link was "Item One", I end up having the whole list displaying "Item One" for every li

Please can someone tell me how to achieve this,as I am unsure how to proceed.

Thanks in advance, please let me know if I can give any additional information.

George

Lightness Races in Orbit · Accepted Answer · 2011-04-07 13:21:38Z

1

Well, you set activeLink to "Item One" and then give it to every element of ul:first a. That's what your code does.

Instead of this variable, consider dynamically adjusting the existing value of each element, using the fact that you can give .text() a function:

// handle nav selection
function selectNav() {
    $(this)
        .parents('ul:first')
            .find('a')
                .removeClass('selected')
                .text(function(index, text) {
                    return text.replace(/^_/, '');
                }) //this ensures the non-active link has no underscore
            .end()
        .end()
        .addClass('selected')
        .text(function(index, text) {
            return "_" + text;
        }); //this adds the underscore to the active link
}

^{Untested. May contain bugs.}

answered Apr 7, 2011 at 13:21

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sheixt Over a year ago

Hey, sorry about the delay in my response! Thanks for the suggestion will try this out asap! The concept makes sense (which is reassuring for me!!). Thanks again

Sheixt Over a year ago

Just tried out the code you suggested Tomalak & it seems to work fine (full testing pending)! Thanks a lot. One thing I'm struggling to understand is the return within the function, specifically 'text.replace(/^_/, '');' But I'm sure upon further reading it will come to me. Thanks again - much appreciated!!!

Lightness Races in Orbit Over a year ago

@Sheixt: No problem. What I'm returning is the result of the String.replace(<regex>, <replacement>) function, replacing instances of _ found at the start of the string (^) with the empty string ''; that is, removing a single leading underscore if it's there.

Sheixt Over a year ago

you legend! Thanks for spelling it for me.

Lathan · Accepted Answer · 2011-04-07 13:22:48Z

0

You are currect, by saving activeLink in the 1st line, you have saved the current selected li.

Just move the "var activeLink....." inside the function selectNav().

answered Apr 7, 2011 at 13:22

Lathan

8534 silver badges14 bronze badges

1 Comment

Lightness Races in Orbit Over a year ago

He still assigns that one variable to every link. Changing its value doesn't fix that.

prabeen giri · Accepted Answer · 2016-02-18 01:43:31Z

0

May be I am confused with your question , but to my best I think this will help

function selectNav() {
    $(this)
        .parent('li')
        .find('a')
        .addClass('selected')
        .text("_" + activeLink)
        .parent('li')
        .siblings('li')
        .find('a')
        .removeClass('selected')
        .text(activeLink)

}

I hope this helps

edited Feb 18, 2016 at 1:43

answered Apr 7, 2011 at 13:32

prabeen giri

8237 silver badges19 bronze badges

Collectives™ on Stack Overflow

Basic JavaScript/jQuery: how to return variable

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related