压缩点击事件/函数

Question

有更好的方法来编码吗？我有大约 100 个项目，每个项目都有点击事件。有没有办法使用 .delegate，或者只是更好的方法来处理这个问题？这段代码也按照我想要的方式工作，但我希望它更加动态。基本上，单击 div 中的类 div 后，我希望将整个父 div 克隆到另一个 div 中。如果需要更多信息，请告诉我。

谢谢！ 迈克尔

$(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

添加

将data-selectid="X"

到 .selectX 元素中，其中 x 是最后一个数字，并添加新类 - 选择

$(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');  
                }
        });


});