First, I'd change the HTML to:
<ul class="selector">
<li><a href="#" id="foo_1">one</a></li>
<li><a href="#" id="foo_2">two</a></li>
<li><a href="#" id="foo_3">three</a></li>
</ul>
<div class="youtube">
<div id="target_foo_1">
<h1>1</h1>
</div>
<div id="target_foo_2">
<h1>2</h1>
</div>
<div id="target_foo_3">
<h1>3</h1>
</div>
</div>
You should use IDs instead of classes because you want to target a
specific element. I left the "selector" class because I figure you may
want to have several sets of these items on a page.
The ID on the link will be applied to the selector used to target a div.
$(function (
{
$('.selector a').click(function()
{
$('#target_' + $(this).attr('id'))
.siblings('div:visible').hide('fast')
.end().show('fast');
return false;
});
});
I'd probably also change the links for buttons.
On Wed, Apr 1, 2009 at 12:09 PM, Johnny <dimas.joh...@gmail.com> wrote:
>
> Hello, I'm wondering if there is a better method for the following
> solution. I would like to find a way to not have to repeat the same
> function over and over in jQuery. So for instance, I have a collection
> of hidden divs, and a collection of selectors below it to show the
> specified div and hide all the others.
>
>
> <div class="youtube">
> <div class="1">
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> In dignissim, est ut ultricies gravida, est leo euismod libero, ut
> commodo massa libero nec felis.
> </div>
> <div class="2">
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> In dignissim, est ut ultricies gravida, est leo euismod libero, ut
> commodo massa libero nec felis.
> </div>
> <div class="3">
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> In dignissim, est ut ultricies gravida, est leo euismod libero, ut
> commodo massa libero nec felis.
> </div>
> </div>
>
>
> <ul class="selector">
> <li><a href="#" class="one">one</a></li>
> <li><a href="#" class="two">two</a></li>
> <li><a href="#" class="three">three</a></li>
> </ul>
>
>
> $(document).ready(function(){
> $('a.one').click(function() {
> $('div.1').show('fast')
> .siblings('div:visible').hide('fast');
> });
> $('a.two').click(function() {
> $('div.2').show('fast')
> .siblings('div:visible').hide('fast');
> });
> $('a.three').click(function() {
> $('div.3').show('fast')
> .siblings('div:visible').hide('fast');
> });
> });
>
>
> Is there a way to shorten the jQuery to just one function that works
> for each of those cases instead of having to repeat the function for
> each class name?
>
> Thanks!
>
