Geek Answers Handbook

JQuery retrieves a hash and applies it as an identifier

My function checks the hash url, returns its value, uses that value to search for the image (by identifier) ​​and applies the class name to it. My console does not show any errors, but I do not see the expected result.

Instead of filtering the .z class by the returned hash value, it writes the entire .z class to id=image

Is there a better way to filter this value and use it as an identifier? 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 account as well as the answer, here is what I ended up 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);
+4
source share
2 answers

You do not filter by ID, you change the identifier. To filter by ID, use the following:

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

Or just get rid of this redundant variable:

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

I think your problem in this line:

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

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

What do you want to do:

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

That says, "select an element with an identifier equal to any in the image variable, and add the" active "class.

Please note: if you have an identifier, you do not need to select in the class, because the id must be unique on the page. You can use a selector that has a class and id, $('.z#' + image) , but it is redundant if you do not have duplicate identifiers on the page, and if you have duplicate identifiers, your HTML is invalid and you are not Get consistent results across browsers.

EDIT: if you do not want to change the element, if it does not have this id and class z, use the $('.z#' + image) selector from my last paragraph. Or $('#' + image + '.z') .

0
source

More articles:


All Articles