I'm relatively new as well but I might be able to shed some light.
This is one generic method:
$("[EMAIL PROTECTED] a.open").each(function() {
$(this).click(function(){
var $$ = $(this);
if
($$.parents("div").children("div.addContent").is(":hidden")){
$$.parents("div").siblings("div").children("div.addContent:visible").children(".floater").fadeOut("slow",
function(){
$(this).parents("div.addContent").slideUp("slow", function () {
$$.children(".handle").hide().end().parents("div").children("div.addContent").slideDown("slow",function(){
$(this).children(".floater").fadeIn("slow");
});
})
});
}
});
});
First, when you're looping over results from a selector you should use the
"each" function, which puts each element in the selector results array in
the "this" scope. this function, for example, finds all a.open elements
that are children of divs that have an id that begins with "home" then sets
their click handlers using "this".
I'm not certain that this long of a chain would be considered a best
practice, but it is doable. One of the best ways to see what jQuery
selectors are returning is by trying the selectors in the firebug console or
using console.log($("myselector")) in your code. you can log the "this"
scope in anonymous functions to see what they are being handed.
regarding order of events, I would say it's up to you. play with it until
you like what you're getting. On the fadeins/outs above you may consider
putting the images/text into table cells or use absolute positioning to keep
the image from collapsing and expanding. The movement of the text makes the
animation kind of jerky.
Brendon Bushman wrote:
>
> hello all-
> I'm new to jquery, and a novice javascript coder with a basic working
> knowledge of OOP from java. I'm trying to create some animated boxes
> for a client page- right now, i have a basic motion test with
> placeholders just to see how this would work here:
>
> http://inforetail.com/motiontest/
>
> You can look at the page to see the BASE behavior I'm looking for.
> And If you take a look at the code, it's nasty- I've got a series of
> statements tied to custom click events for each link, which act on
> each box accordingly.
>
> Ideally, I'd like to genericize this so that the action of opening
> one box and closing the others is as simple as possible; I see two
> ways to do this:
> 1. Using a combination of the "this" statement and whatever parental
> transversal techniques I would need to automatically identify the
> enclosing box, and then then do the rest... but I'm quite unclear on
> using "this", and not sure of the best way to have a set of functions
> that run on both the parent and various other children of that parent.
>
> 2. Write my own function that gets tied to the onclick even in the
> html, that passes in the enclosing div name, i.e. onclick="divOpen
> (homeIR);" and pass that along to the requisite jquery statements
> within the function. But again, not sure the best way to identify
> the other divs. My other concern with this method is specifying and
> calling it from the HTML... is this less accessible or otherwise a
> compromise from being able to trigger the event from within the
> document.ready function like I am now?
>
> or maybe some combination thereof.
>
> Also, some related questions:
> 1. is my best way to control order of operations (i.e. CLOSE the
> other Div BEFORE you open the one that is clicked) using the callback
> portion of a function?
>
> 2. ultimately, just like my fading image now, I may have a number of
> fades and other actions on children of the opening and closing DIVs
> that would get built into this. Does that change the answer to my
> main question?
>
> 3. Obviously, there may be a far more elegant way to do all of this -
> if I'm barking up the wrong tree, just say so. :)
>
> Thanks in advance for any light you can shed on this...
>
> best,
> Brendon
>
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/best-practices---using-jquery--in-functions-tf3391410.html#a9443929
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
