Consolidate Click Functions

Question

How do I consolidate the following?

    var vid01 = $("#vid01");

    $("#img01").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(0));
        });
    });

    $("#img02").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(1));
        });
    });

    $("#img03").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(2));
        });
    });

    $("#img04").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(3));
        });
    });

I've been trying for a while but I can't figure it out. Here's one attempt:

var vid01 = $("#vid01");

        $("#img01, #img02, #img03, #img04").live('click', function() {
            $("#aaaLogo").fadeOut(100);
            $("#frame").fadeIn(100, function() {
                vid01.show(setVideo(0));
                vid01.show(setVideo(1));
                vid01.show(setVideo(2));
                vid01.show(setVideo(3));
            });
        });

The above attempt only shows the last video. I know why, just don't know how to map each id to each of those functions.

This isn't meant to be sequential. The user should be able to click on any #img* and get the corresponding video.

Answer 1

Add a class to the images and a data attribute.

<img id="img01" class="an_image" data-vid="1" />


$(".an_image").on('click', function() {
    $("#aaaLogo").fadeOut(100);

    var temp_var = $(this).data('vid');

    $("#frame").fadeIn(100, function() {
        vid01.show(setVideo(temp_var));
    });
});

You shouldn't use .live() anymore either (depending on the jQuery version you are using), they switched back to .on()