Much nicer. Thanks for the tip!
On Thu, Apr 2, 2009 at 1:43 PM, mkmanning <michaell...@gmail.com> wrote:
>
> Actually there's an easier way as long as the links and the items
> being hidden/show have a one-to-one relationship.
>
> $(document).ready(function(){
> var a = $('ul.selector li a'), div = $('div.youtube').children
> ('div');
> a.click(function(){
> $(div.hide().get(a.index(this))).show();
> return false;
> });
> }
>
>
> On Apr 2, 9:12 am, brian <bally.z...@gmail.com> wrote:
>> 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!
