Thanks Tim, but I'm actually trying to pass variables the *other*
direction.
I have many divs on a page, and I need some mechanism of toggling
these from different links and buttons within the page. There is no
predictable parent-child relationship to these divs. What I was hoping
to do was to use a similar approach to the existing javascript
function, but using jquery's library of functions.
lihao's example is probably the closest thing to what I'm looking for,
but it seems overly complex for a function that javascript can
accomplish by itself in 2 lines.
After doing some different tests (based on many of the recommendations
here), I've come to the conclusion that the only way to maintain a
truly simple structure would be by somehow nesting a function within
jquery OR nesting jquery inside a javascript function (I don't know if
either of these is possible).
Below is NOT real code, but it's what I would think SHOULD be possible
with jquery (or some variant)...I just don't know the syntax well
enough yet:
function toggleDialog(oldscreen, newscreen) {
$(function() {
$(".toggle").click(function() {
$(oldscreen).toggle(); //Click 1=Hide; Click 2=Show...etc
$(newscreen).toggle(); //Inverse of above...etc
return false;
});
});
}
To explain: The javascript function receives the two vars from the DOM
element (could be a link, a form button, anything!), which are then
>>used by jquery<< to identify which elements are to be affected. That
way, jquery doesn't need to care which element triggered something, it
will simply just toggle the element to the next state (on or off).
So my HTML would look like this:
<!--ONE-->
<div id="oldscreen1">
<a href="javascript:toggleDialog('oldscreen1','newscreen1');"
class="toggle">Open 1</a>
</div>
<div id="newscreen1">
<form>
New page content 1
<input type="button" value="Close" class="toggle"
onclick="javascript:toggleDialog('newscreen1','oldscreen1');" />
</form>
</div>
<!--TWO-->
<div id="oldscreen2">
<a href="javascript:toggleDialog('oldscreen2','newscreen2');"
class="toggle">Open 2</a>
<a href="javascript:toggleDialog('oldscreen2','newscreen3');"
class="toggle">Open 3</a>
<a href="javascript:toggleDialog('oldscreen2','newscreen4');"
class="toggle">Open 4</a>
</div>
<div id="newscreen2">
<form>
New page content 2
<input type="button" value="Close" class="toggle"
onclick="javascript:toggleDialog('newscreen2','oldscreen2');" />
</form>
</div>
<div id="newscreen3">
<form>
New page content 3
<input type="button" value="Close" class="toggle"
onclick="javascript:toggleDialog('newscreen3','oldscreen2');" />
</form>
</div>
<div id="newscreen4">
<form>
New page content 4
<input type="button" value="Close" class="toggle"
onclick="javascript:toggleDialog('newscreen4','oldscreen2');" />
</form>
</div>
Using javascript this is *a piece of cake* to pull off, so my question
is, can this be done with jquery just as easily? Or am I really
looking at having to use something more verbose like lihao's
suggestion?
Thanks, everyone, for your help so far :)
Emlyn
On Feb 10, 9:04 pm, Timothee Groleau <[EMAIL PROTECTED]>
wrote:
> On Fri, 2008-02-08 at 08:11 -0800, cbmtrx wrote:
> > I've just barely started getting my feet wet with jquery, so please
> > bear with this novice's question...
>
> > With a javascript function you can accept vars like this:
>
> > function doSomething(number, name) {
> > //Do something with them
> > }
>
> > From an href in the HTML like this:
> > <a href="javascript:doSomething('1234','john');>Click me</a>
>
> > [...]
>
> > Any suggestions?
>
> If you are able to change your function 'doSomething' a little bit, you
> may also use the jQuery method 'bind' to have custom parameters passed
> with the event. For example:
>
> ==========
> function doSomething(evt)
> {
> var num = evt.data.num;
> var name = evt.data.name;
>
> // do whatever
>
> }
>
> $("a.link1").bind("click", {num:1234, name:'john'}, doSomething);
> $("a.link2").bind("click", {num:4567, name:'harry'}, doSomething);
> $("a.link3").bind("click", {num:8912, name:'dick'}, doSomething);
> ==========
>
> if you want it less verbose, you can use an array as your data
> parameter:
>
> ==========
> function doSomething(evt)
> {
> var num = evt.data[0];
> var name = evt.data[1];
>
> // do whatever
>
> }
>
> $("a.link1").bind("click", [1234, 'john'], doSomething);
> $("a.link2").bind("click", [4567, 'harry'], doSomething);
> $("a.link3").bind("click", [8912, 'dick'], doSomething);
> ==========
>
> Tim.
