You only need one document.ready, and there's a shorthand:
$(function() {
$("li.one").click(function() {
$("div.a").toggle("highlight", {}, 1000);
});
$("li.two").click(function() {
$("div.b").toggle("highlight", {}, 1000);
});
$("li.three").click(function() {
$("div.c").toggle("highlight", {}, 1000);
});
});
If you're wanting to go even more minimal:
$(function() {
var hash = { "one": "a", "two": "b", "three": "c" };
$("li.one,li.two,li.three").click(function() {
$("div." + hash[this.className]).toggle("highlight", {}, 1000);
})
});
- Richard
On Fri, Apr 17, 2009 at 12:26 AM, Calvin <cstephe...@gmail.com> wrote:
>
> I'm having trouble simplifying my jQuery script... I tried but I am
> at beginner level with this stuff.
>
> Here is the jQuery script:
>
> $(document).ready(function() {
> ("li.one").click(function() {
> $("div.a").toggle("highlight", {}, 1000);
> });
> });
>
> $(document).ready(function() {
> ("li.two").click(function() {
> $("div.b").toggle("highlight", {}, 1000);
> });
> });
>
> $(document).ready(function() {
> ("li.three").click(function() {
> $("div.c").toggle("highlight", {}, 1000);
> });
> });
>
> Here is the mark-up:
>
> <ul>
> <li class="one">text</li>
> <li class="two">text</li>
> <li class="three">text</li>
> </ul>
>
> <div class="a">text</div>
> <div class="b">text</div>
> <div class="c">text</div>
