CODEWITHSUNDEEP
javascriptjquery
gespinha
gespinha

Reputation: 8487

Jquery issue with variable

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

});

Upvotes: 1

Views: 82

Answers (6)

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 1

just lerning
just lerning

Reputation: 866

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

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

Upvotes: 0

jokeeffe
jokeeffe

Reputation: 395

$(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".

Upvotes: 1

Yaron U.
Yaron U.

Reputation: 7881

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");
    });

});

Upvotes: 0

adeneo
adeneo

Reputation: 318202

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

Upvotes: 1

Guilherme Sehn
Guilherme Sehn

Reputation: 6787

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.

Upvotes: 0

Related Questions