trying to storing selectors in variables

Question

ok so here is what i am trying to do. i have a navLink class that has ID 1 through x (in this case it is 5, but the idea is that i can add to it if needed). As well as Divs under the Selection class, 1Div through xDiv. The div's toggle, as well as the navlinks changing color as if it was using CSS active tag. This works great when I was using Home div and I didn't want one of the link to start as active. Now that i am trying to do that I need to be able to store the given selector in the 'active' var. Also I am trying to make it so when clicking navLink number 3 it goes to a different page, i run into the same problem. I am a bit new to JavaScript so i am not to sure how JS stores variables. Here is the code:

$(function() {
  var active = $('#1');

  $('.selection').hide();
  $('#1Div').show();

  $('.navLink').hover(
  function() {
     $(this).css("color","#806ac7"); 
  },
  function() {
      if(this === active) {
        $(this).css("color","#961014");
      } else {
        $(this).css("color","#000000");
      }
      });
  $('.navLink').click(function(e){
    active = this;
    $('.navLink').css("color","#000000");
    $(this).css("color","#961014");
      if(this == '#3') {
        location.href = "./Contact.html"  
      } else {
    $('.selection').hide();
    $('#'+ this.id + 'Div').show();
      }
  });
});

Thanks ahead of time you guys here at stack are a great help.

EDIT:

Thanks for the help so far. As requested here is the link to an example: http://jsfiddle.net/fgj6H/ everything is working but there link on navlink 3 still looking for help with that.

You are initially setting it to a *jQuery extended element* in `var active = $('#1');` and then you are comparing it against a *DOMElement* when you do `if(this === active) {`.. You should change the first statement to `var active = $('#1')[0];` — techfoobar, Jun 28 '13 at 13:16
@epascarello - Coz I'm not sure if that is the complete answer.. Maybe its just part of the answer.. — techfoobar, Jun 28 '13 at 13:19
@techfoobar you are right thanks. it makes sense now. When I made an alert before and after the click command the out put was: — l33tn4, Jun 28 '13 at 14:54
@techfoobar this goes right along with what you are saying thanks — l33tn4, Jun 28 '13 at 14:56
@techfoobar one question, do you have some there that references the [0] syntax Or some resource that explains this idea? — l33tn4, Jun 28 '13 at 15:00

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

I think part of your trouble is that ID's must start with a letter in HTML4 and must contain at least one letter in HTML5. ID's beginning with numbers are not allowed. I recommend renaming your ID's to id="n1" and referring to them as

var active = $("#n1");

See this answer What characters are allowed in DOM IDs?

And the HTML5 Spec http://www.w3.org/TR/html5/dom.html#the-id-attribute

edited May 23 '17 at 12:11

Community

1
1

answered Jun 28 '13 at 13:27

Queenvictoria

371
5
19

Bungus · Accepted Answer · 2013-06-28T15:32:08.620

EDIT:

I think you need this

if(this.id == 'n3')

instead of this

if(this == '#n3')

ORIGINAL ANSWER:

I think this may be a scope issue.

Local scope:

var active = $('#1');

Global scope:

active = this

Try removing the first var so it reads

active = $('#1');

Edit: here is your code with some comments.

  $(function() {
  // *** this variable is defined with "var" keyword, meaning it is only available
  // in the immediate scope i.e. within the braces (it's more complicated than that)
  var active = $('#1');

  $('.selection').hide();
  $('#1Div').show();

  $('.navLink').hover(
  function() {
     $(this).css("color","#806ac7"); 
  },
  function() {
      // *** this can only refer to a global variable, as "var active" is not present in here. The global will not get defined till .navLink is clicked.
      if(this === active) {
        $(this).css("color","#961014");
      } else {
        $(this).css("color","#000000");
      }
      });
  $('.navLink').click(function(e){

    // *** this sets a new global variable "active" and gives it a value
    active = this;
    $('.navLink').css("color","#000000");
    $(this).css("color","#961014");
      if(this == '#3') {
        location.href = "./Contact.html"  
      } else {
    $('.selection').hide();
    $('#'+ this.id + 'Div').show();
      }
  });
});

made the changes and get the same result. The 'active' variable is not storing the right ID. Thanks for the help and the understand thou — l33tn4, Jun 28 '13 at 14:50
@l33tn4 - please can you provide me with a jsfiddle as a working example? — Bungus, Jun 28 '13 at 15:07
@l33tn4 - I think you just missed `this.id` jsfiddle.net/Ballcheck/fgj6H/1 — Bungus, Jun 28 '13 at 15:28

trying to storing selectors in variables

2 Answers2