Condensing Javascript/jQuery Code

Question

I'd like to start by thanking anyone who can help me condense this piece of Javascript/jQuery code.

        jQuery(function() {

            jQuery('#pitem-1').click(function(e) {
                jQuery("#image-1").lightbox_me({centered: true, onLoad: function() {
                    jQuery("#image-1").find("input:first").focus();
                }});

                e.preventDefault();
            });        

            jQuery('#pitem-2').click(function(e) {
                jQuery("#image-2").lightbox_me({centered: true, onLoad: function() {
                    jQuery("#image-2").find("input:first").focus();
                }});

                e.preventDefault();
            });

            jQuery('#pitem-3').click(function(e) {
                jQuery("#image-3").lightbox_me({centered: true, onLoad: function() {
                    jQuery("#image-3").find("input:first").focus();
                }});

                e.preventDefault();
            });

            jQuery('table tr:nth-child(even)').addClass('stripe');
        });

Basically each #pitem-ID opens the same #image-ID in a popup.

Thanks again to anyone who can help.

Jack

Answer 1

Your functions all look pretty much the same, which is a clue that you should probably move that functionality out into something that can be called:

function createHandler(id) {
    return function (e) {
        $(id).lightbox_me({centered: true, onLoad: function() {
            $(id).find("input:first").focus();
        }});

        e.preventDefault();
    }
};

Then you can use:

 $('#pitem-2').bind('click', createHandler("#image-2"));

Answer 2

You can:

1. Combine multiple objects into the selector with a common event handler
2. Use this to refer to the object that triggered the event
3. Derive the image ID from the id of the object that generated the event.

That lets you use one piece of code to handle the action for all three objects:

jQuery(function() {
    jQuery("#pitem-1, #pitem-2, #pitem-3").click(function() {
        var image$ = $("#" + this.id.replace("pitem", "image"));
        image$.lighbox_me({centered: true, onLoad: function() {
                    image$.find("input:first").focus();
        }});
        e.preventDefault();
    });
    jQuery('table tr:nth-child(even)').addClass('stripe');
});

Answer 3

$('[id^="pitem-"]').click(function(e) {
    var numb = this.id.split('-')[1];
    $("#image-"+numb).lightbox_me({centered: true, onLoad: function() {
         $(this).find("input:first").focus();
    }
    });
    e.preventDefault();
});        

$('table tr:nth-child(even)').addClass('stripe');

Answer 4

Without context it is hard to tell, but is it necessary to have a unique ID for each pitem ? Why not use a CSS class instead of a ID like so:

<div class="pitem">
<div id="image1"><img ... /></img>
</div>
...
<div class="pitem">
<div id="image3"><img ... /></img>
</div>

And then use the class selector in jQuery to add the click functionality all of them at once:

$(".pitem").click(function(e) {
  var currentItem = e.target;
  ...
  e.preventDefault();
});