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

Answer 1

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