JQuery получить хеш и применить его в качестве идентификатора

Question

Моя функция проверяет URL-адрес для хэша, возвращает его значение, использует это значение, чтобы найти изображение (по идентификатору) и применить к нему имя класса.Моя консоль не показывает никаких ошибок, но я не вижу ожидаемого результата.

Вместо того, чтобы фильтровать класс .z по возвращенному значению hash, он записывает весь класс .z в id=image

Есть ли лучший способ отфильтровать это значение и использовать его в качестве идентификатора?Спасибо!

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

РЕДАКТИРОВАТЬ:

Принял во внимание все комментарии, а также ответ, вот что я закончил:

(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

Вы не фильтруете по ID, вы меняете ID. Чтобы отфильтровать по ID, используйте это:

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

Или просто избавьтесь от этой лишней переменной:

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

Answer 2

Я думаю, что ваша проблема в этой строке:

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

Что говорит: «выберите все элементы с классом« z »и установите для их атрибута« id »строку« image », затем добавьте класс« active ».

Что вы хотите сделать, это:

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

Что говорит "выберите элемент с идентификатором, равным значению переменной image, и добавьте класс" активный ".

Обратите внимание, если у вас есть идентификатор, который вам не нужно выбирать в классе, потому что он должен быть уникальным на странице. Вы можете использовать селектор с классом и id, $('.z#' + image), но он является избыточным, если у вас нет дублирующих идентификаторов на странице, и если вы делаете иметь дубликаты идентификаторов, ваш HTML недействителен, и вы не получите согласованных результатов в разных браузерах.

РЕДАКТИРОВАТЬ: если вы не хотите изменять элемент, если у него нет идентификатора и класса z, используйте селектор $('.z#' + image) из моего последнего абзаца. Или $('#' + image + '.z').