Apply to function to multiple elements

Question

HTML:

<div class="container-fluid">
<div class="sidebar">
    <ul class="pills">  
        <li id="l1"><a id="link1">Lesson 1</a></li> <hr>
        <li id="l2"><a href="#" >Lesson 2</a></li> <hr>
        <li id="l3"><a href="#" >Lesson 3</a></li> <hr> 
    </ul>
   <div class="span16" id="target">
</div>

Javascript:

$('#l1').click(function(){
    $('#target').fadeOut('fast', function(){
        $('#target').load("lesson/lesson1.html", function(){
                $('#target').fadeIn('slow');

                });
            });

        });

I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

Show us the HTML, without it it would be guessing what you are trying to do. — Tadeck
– Tadeck, Commented Jan 30, 2012 at 4:27
usually for targeting groups you don't want to use IDs but rather classes or elements. Can you post your HTML? — j08691
– j08691, Commented Jan 30, 2012 at 4:28
Why in the world would you wait for the animation to finish before sending the AJAX request? — SLaks
– SLaks, Commented Jan 30, 2012 at 4:28

SLaks · Accepted Answer · 2012-01-30 04:42:16Z

5

$('a.AjaxLink').click(function(){
    var url = this.href;

    $('#target').fadeOut('fast')
                .load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
    });

    return false;
});

This code handles the click event for all <a>s with a class of AjaxLink.

In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.

When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.

Finally, it tells the browser not to take the default action (navigating to the page) by returning false.

edited Jan 30, 2012 at 4:42

answered Jan 30, 2012 at 4:27

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tsand Over a year ago

Alright...could please explain the code? I'm still quite new to javascript.

SLaks Over a year ago

@tsand: What don't you understand?

ajax333221 Over a year ago

@tsand I think you need to put class="AjaxLink" to every link you want that to happen. Then the function should work for every <a> that have the class AjaxLink

tsand Over a year ago

@SLaks this.href and a.AjaxLink, I don't quite understand what's going on.

SLaks Over a year ago

@tsand: this is a raw DOM element. It has an href property that returns value of the href="" HTML attribute. a.AjaxLink is a jQuery (or CSS) selector. api.jquery.com/category/selectors

|

Ajinkya · Accepted Answer · 2012-01-30 04:28:36Z

0

Use class instead of id. Select elements using class.
Also you can use .each() method

answered Jan 30, 2012 at 4:28

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

Comments

user7675 · Accepted Answer · 2012-01-30 04:38:42Z

You could do this with a new jQuery method. Given this HTML:

<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>

<div id="target"></div>

You'd use this code:

jQuery.fn.switchTarget = function( target, href ) {
    var $target = $(target);

    this.bind( 'click', function(e) {
        e.preventDefault();

        $target.fadeOut('fast', function() {
            $target.load( href, function() {
                $target.fadeIn('slow');
            });
        });
    });

    return this;
};

$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );

Collectives™ on Stack Overflow

Apply to function to multiple elements

3 Answers 3

8 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Related