Question

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.

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

Answer 1

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