jQuery retrieve hash and apply it as an ID

My function checks the URL for a hash, returns it's value, uses that value to find an image (by ID) and apply a class name to it. My console's not showing any errors, but I'm not seeing the expected result.

Inst开发者_开发技巧ead of filtering the .z class by the returned hash value, it's writing all of the .z class to id=image

Is there a better way to filter that value and use it as an ID? Thanks!

JavaScript:

(function($){
$.brantley = function(callback) {
    var $doc = $(document),
        $win = $(window),
        $z, $load, $footer, $header, $status, $container, $hash;

    $doc.ready(function() {
        $z          = $('.z');
        $load       = $('#load');
        $footer     = $('footer');
        $header     = $('header');
        $status     = $('#status');
        $container  = $('#container'),
        hash        = gethash();

        if(hash) {
            var image = hash;
            $('.z').attr('id', 'image').addClass('active');
        } else {
            $('.z:first').addClass('active');
        }

    });

    function gethash() {
        var hash=window.location.hash;
        hash=hash.replace(/#/,'');
        return hash;
    }

    function updateNumber(type) {
        window.location = window.location.pathname + "#" + type;
    }

};
})(jQuery);

EDIT:

Took all the comments into consideration as well as the answer, here's what I finished with:

(function($){
$.brantley = function(callback) {
    var $doc = $(document),
        $win = $(window),
        $z, $load, $footer, $header, $status, $container;

    $doc.ready(function() {
        $z          = $('.z');
        $load       = $('#load');
        $footer     = $('footer');
        $header     = $('header');
        $status     = $('#status');
        $container  = $('#container');

        var hash = gethash();

        if(hash) {
            $('#' + hash + '.z').addClass('active');
        } else {
            $('.z:first').addClass('active');
        }

        bromance();
    });

    $win.load(function() {
        bromance();
        $load.fadeOut('fast', function() {
            $('.active').fadeIn('slow');
            $status.fadeIn('slow');
            $footer.fadeIn('slow');
        });
    });

    $win.resize(function() {
        bromance();
    });

    function gethash() {
        var hash=window.location.hash;
        hash=hash.replace(/#/,'');
        return hash;
    }

    function updateNumber(type) {
        window.location = window.location.pathname + "#" + type;
    }
};
})(jQuery);

You are not filtering by ID, you are changing the ID. To filter by ID, use this:

if(hash) {
    var image = hash;
    $('#' + image + '.z').addClass('active');
} else {
    $('.z:first').addClass('active');
}

Or just get rid of that superfluous variable:

if(hash) {
    $('#' + hash + '.z').addClass('active');
} else {
    $('.z:first').addClass('active');
}

I think your problem is this line:

$('.z').attr('id', 'image').addClass('active'); 

Which says "select all elements with class 'z' and set their 'id' attribute to the string 'image', then add the class 'active'.

What you want to do is this:

$('#' + image).addClass('active');

Which says "select the element with the id equal to whatever's in the variable image, and add the class 'active'.

Note, if you have an id you don't need to select on the class because id is supposed to be unique in the page. You can use a selector that has class and id, $('.z#' + image), but it is redundant unless you have duplicate ids on the page, and if you do have duplicate ids your HTML is invalid and you will not get consistent results across different browsers.

EDIT: if you don't want to change the element unless it has that id and the z class then use the $('.z#' + image) selector from my last paragraph. Or $('#' + image + '.z').