My apology for the confusion. I should have just posted the darn code. I'll remember this in the future.
I had one typo, left out the # for the container, then it worked fine. I think it's a good demo but I still don't think I need all the for 'each' stuff however. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Making Objects Appear and Disappear | Changing Visibility Style</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.fn.toggleVis = function() { // Here, "this" is the jQuery object // This return statement is used for two reasons // 1. To make sure we hit every HTML element in the jQuery object // 2. To make sure that this method doesn't "break the chain" return this.each(function() { // Iterate over all selected HTML elements and toggle their "visibility" CSS property // Here, "this" a HTML element if(this.style.visibility == 'hidden') { this.style.visibility = 'visible'; } else { this.style.visibility = 'hidden'; } }); }; $(document).ready(function(){ /* testing mouse events in jQuery */ $("#cheshireCat").show(); /* hide cat */ $('#hidecat').click(function(){ $("#cheshireCat").hide(); }); /* show cat */ $('#showcat').click(function(){ $("#cheshireCat").show(); }); /* toggle visibility */ $('#toggle').click(function(){ $('#cheshireCat').toggleVis(); }); }); </script> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #ccc; margin: 8px; } #cheshireCat { margin: 8px; } </style> </head> <body> <a id="hidecat" href="#Javascript;">Hide The Cat</a> <a id="showcat" href="#Javascript;">Show the Cat</a> <a id="toggle" href="#Javascript;">Change the Cat's Visibility</a> <div id="cheshireCat"><img src="images/alice24.gif" /></div> <h1>The Cheshire Cat</h1> </body> </html> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mitchell Waite Sent: Tuesday, July 24, 2007 11:08 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Toggling an objects visiblty without show and hide I don't think you understand my question. I have a link called 'Change the cats visibility'. I have a div with a cat image inside it. I would like that particular link to change the visibility of that particular image inside a div. I want to be able to give the link an ID and the routine to toggle the visibility a function in jQuery. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Aaron Heimlich Sent: Tuesday, July 24, 2007 10:40 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Toggling an objects visiblty without show and hide On 7/24/07, Mitchell Waite <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> > wrote: What does "hit" mean A jQuery object is an pseudo-array[1] that contains all of the HTML elements selected by a give selector. So $("div.foo"); is a pseudo-array of all of the "div" elements on the page that have the class "foo". By "hit", I mean that toggleVis() will toggle each and every one of the elements selected whatever selector you use (that's usually what you want). and what is the "chain"? See http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery. 29 I don't want "everything to become invisible, just the one container I specify. That's exactly what my plugin does. Only the element's selected by the selector that you use will be affected. Wont th is work just fine? jQuery.fn.toggleVis = function() { if(this.style.visibility == 'hidden') { this.style.visibility = 'visible'; } else { this.style.visibility = 'hidden'; } }; No it won't. In that context, "this" refers to a jQuery object, which does not have a "style" property. To iterate over the contents of a jQuery object, use the "each" method[2], as plugin does. The "each" method accepts a function, and within that function "this" is set to whatever element is currently being iterated over. The "each" method returns the jQuery object it was iterating over, which allows users to continue chaining method calls onto each other. The concept of "this" is certainly one of the more confusion aspects of jQuery (and of JavaScript in general). For now, I direct you to http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27thi s.27, although there was a post by Michael Geary some time ago[3] that explained this concept very well (as he always does). [1] It's not an actual instance of JavaScript's Array class, but it acts enough like one that it can be used mostly in the same fashion. You can iterate over it like an Array object, and you can access indexes (foo[0], foo[1], foo[2], etc.) like you can with an Array object, but that's about it. [2] http://docs.jquery.com/Core#each.28_fn_.29 [3] I believe this is it: http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961 d3/92e29565dff28d32#92e29565dff28d32 -- Aaron Heimlich Web Developer [EMAIL PROTECTED] http://aheimlich.freepgs.com
