Question

Is there a better way to code this? I have around 100 items that each have click events. Is there a way to use .delegate, or just a better way to handle this? This code works the way I want it too but I would like it to be more dynamic. Basically a class div within a div is clicked and I want the whole parent div to be cloned into another div once it is selected. Please let me know if more information is needed.

Thanks!
Michael

$(function() { 
        $(".select1").click(function () {
            if ($('.saved_list .thumb1').length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select1').replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                    //alert($('.saved > li').length);
                } else {
                alert ('You can only choose 3 paintings');  
                }
        });

        $(".select2").click(function () {
            if ($('.saved_list .thumb2').length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select2').replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                    //alert (ct);
                } else {
                alert ('You can only choose 3 paintings');  
                }
        });

        $(".select3").click(function () {
            if ($('.saved_list .thumb3').length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select3').replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                } else {
                alert ('You can only choose 3 paintings');  
                }
        });

        $(".select4").click(function () {
            if ($('.saved_list .thumb4').length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select4').replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                } else {
                alert ('You can only choose 3 paintings');  
                }
        });


        $(".select5").click(function () {
            if ($('.saved_list .thumb5').length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select5').replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                } else {
                alert ('You can only choose 3 paintings');  
                }
        }); 
}); 

Answer 1

add

data-selectid="X"

into your .selectX elements where x is that last number and also add new class – selects

$(function() { 
        $(".selects").click(function () {
            var id = $(this).data('selectid');
            if ($('.saved_list .thumb'+id).length == 0 && $('.saved > li').length < totalPic)
                {
                    $(this).parent().clone().appendTo('.saved_list ul');
                    $('.saved .select'+id).replaceWith('<div class="remove">Remove</div>');
                    $('.saved a').contents().unwrap();
                    //alert($('.saved > li').length);
                } else {
                alert ('You can only choose 3 paintings');  
                }
        });


});