jquery variables not working

Question

I have some code that makes the background color of a div fade. The code is currently working the way I want it to, but I would like to replace part of it with a variable so I can change which div(s) it will affect. The div that it is affecting has an id of "one", but when I try to make that the value of a variable and stick the variable in the code in it's placed, it doesn't work anymore. Is there a different way I can do this to make it work? Here is the code:

var temp2 = "one";
$(document).ready(function () {
    $("#temp2").click(function () {
        $("#temp2").animate({
            "opacity": "0.15"
        }, "slow");
    });
});

Remember that $() expects a string as an argument (for selectors) and temp2 is a variable name (not a string). — jahroy
– jahroy, Commented Apr 27, 2013 at 2:50

Chase Florell · Accepted Answer · 2013-05-08 04:16:15Z

You're close... try this.

var temp2 = "#one";
$(document).ready(function () {
    $(temp2).click(function () {
        $(this).animate({
            opacity: '0.15'
        },
            "slow");
    });
});

here's a working example

Alternatively, you can just use a class and forget about the variable.

$(document).ready(function () {
    $('.animateMe').click(function () {
        $(this).animate({
            opacity: '0.15'
        },
            "slow");
    });
});

Please see this working example

also, you can create an array of "id's" if you want the same handler to run on multiple elements

var arr = ["one", "two", "three", "four", "five"];
$(document).ready(function () {
    // loop through the array
    jQuery.each(arr, function () {
        // create a local variable
        var id = '#' + this;
        $(id).click(function () {
            $(id).animate({
                opacity: '0.15'
            },
                "slow");
        });
    });
});

here's a working example

Collectives™ on Stack Overflow

jquery variables not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related