凝聚點擊事件/功能

Question

有沒有更好的方法來編碼？我有大約100個項目，每個項目都有點擊事件。有沒有辦法使用.delegate，或只是一個更好的方式來處理？這段代碼的工作方式也是我想要的，但我希望它更具動態性。基本上，一個div內的class 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'); 
       } 
     }); 


});