Сжатие события / функции щелчка - PullRequest
Новая
       16

Сжатие события / функции щелчка

0 голосов
/ 14 сентября 2011

Есть ли лучший способ закодировать это? У меня есть около 100 предметов, каждый из которых имеет события клика. Есть ли способ использовать .delegate, или просто лучший способ справиться с этим? Этот код работает так, как я хочу, но мне бы хотелось, чтобы он был более динамичным. Обычно щелкают по div класса внутри div, и я хочу, чтобы весь родительский div был клонирован в другой div после его выбора. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Спасибо! 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');  
                }
        }); 
});

1 Ответ

2 голосов
/ 14 сентября 2011

добавить

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


});
...