Jquery issue with variable

Question

I have the following example: http://jsfiddle.net/gespinha/yTjUL/13/

The variable should be triggered on click, making the link change class from on to off and change colour from red to green. But instead it starts already green, thus making the function useless.

Why does it not work?

HTML

<a id="link" href="javascript:void(0)" class="on">CLICK HERE</a>

JQUERY

$(document).ready(function () {

    var $myVar = $(document).find('.on').addClass('off').removeClass('on');
    $('link').click(function () {
        $myVar
    });

});

David Thomas · Accepted Answer · 2013-11-01 23:10:26Z

You seem to be under the impression that the variable will store a chain of actions to perform later, when the variable is 'called,' but that's not (clearly) what happens: the first line, within the ready() handler, in the var assignment, finds the .on element and performs the actions you specify, storing the .on element(s) in the variable (as jQuery methods almost all return the this object).

Instead:

$(document).ready(function () {
    // use the `#link` notation, since 'link' is the id of the element:
    $('#link').click(function () {
        // assign a function to the click-event handler:
        $('.on').addClass('off').removeClass('on');
    });
});

Or, more simply (if you want to toggle between 'states') use toggleClass() and $(this) (rather than selecting from the whole of the document each time the user clicks the given element):

$(document).ready(function () {
    $('#link').click(function () {
        $(this).toggleClass('on off');
    });
});

Also, rather than using javascript:void(0) in the href, simply use jQuery to prevent the default action, with:

$(document).ready(function () {
    $('#link').click(function (e) {
        e.preventDefault();
        $(this).toggleClass('on off');
    });
});

JS Fiddle demo.

References:

adeneo · Accepted Answer · 2013-11-01 22:54:38Z

1

It doesn't work that way, the variable will just contain the result of whatever methods you called, and for jQuery that means the element will be returned, so the variable $myVar only equals $(document) inside the event handler, it does not call the chained methods again.

You have to do:

$(document).ready(function () {
    $('#link').on('click', function () {
        $('.on').toggleClass('on off');
    });
});

answered Nov 1, 2013 at 22:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

jokeeffe · Accepted Answer · 2013-11-01 22:57:01Z

1

$(document).ready(function () {
    $('#link').click(function () {
        $(".on").addClass("off").removeClass("on");
    });
});

As Guilherme Sehn noted, the $myVar variable is not needed. Just put your code in the click event. In addition, the link selector needs to be "#link", not "link".

answered Nov 1, 2013 at 22:57

jokeeffe

3951 silver badge6 bronze badges

Comments

Guilherme Sehn · Accepted Answer · 2013-11-01 22:54:26Z

0

By doing this, you'll be executing these actions and storing the return value (which will be the jQuery elements) inside $myVar. You can just put your code inside the click trigger function.

$('#link').click(function () {
    $('.on').addClass('off').removeClass('on');
});

Also, you forgot the # before your ID. Without that your code will select link tags, not the element with the id link. And you do not need to explicity use $(document).find('.on') as all DOM elements are inside it.

answered Nov 1, 2013 at 22:54

Guilherme Sehn

6,79722 silver badges36 bronze badges

Comments

Yaron U. · Accepted Answer · 2013-11-01 22:56:37Z

0

I guess you meant $("#link")... and not $("link")

And if I understand right - the full script should be:

$(document).ready(function(){
    $("#link").click(function(){
         $(".on").addClass("off").removeClass("off");
    });

});

answered Nov 1, 2013 at 22:56

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Comments

just lerning · Accepted Answer · 2013-11-01 22:57:28Z

0

You don't invoke the function and your selector is wrong.

$(document).ready(function () {
  $('#link').click(function () {
      $(document).find('.on').addClass('off').removeClass('on');
  });
});

answered Nov 1, 2013 at 22:57

just lerning

8665 silver badges20 bronze badges

Collectives™ on Stack Overflow

Jquery issue with variable

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related