縮短代碼

Question

嗨有其他方法可以縮短此代碼嗎？我在一個頁面中有多個表單，所以我需要通過ID來定位它。

$('#documents_valid_id .dz-remove').click(function(){ 
    $('#documents_valid_id').removeClass('doc-upload-error'); 
}); 

$('#documents_proof_billing .dz-remove').click(function(){ 
    $('#documents_proof_billing').removeClass('doc-upload-error'); 
}); 

$('#documents_proof_income .dz-remove').click(function(){ 
    $('#documents_proof_income').removeClass('doc-upload-error'); 
}); 

Answer 1

是的。您可以使用常用類.dz-remove選擇該元素，因爲該類僅適用於要從中刪除doc-upload-error類的元素。

你只需要做一次。像這樣：

$('.dz-remove').click(function(){ 
    $(this).parent().removeClass('doc-upload-error'); 
}); 

或者您也可以添加自定義類，你想從你自己刪除類以及$('.class-name')發現它在jQuery的任何元素，那麼你現在正在做同樣的事情。

如果您想選擇.dz-remove只有那些ID內，你仍然可以使它像這樣的工作：

$('#documents_valid_id .dz-remove, 
    #documents_proof_billing .dz-remove, 
    #documents_proof_income .dz-remove' 
).click(function(){ 
    $(this).parent().removeClass('doc-upload-error'); 
}); 

注：這種方法將如果您包含.dz-remove類元素不是第1級的孩子失敗你的表格。這意味着它會失敗，如果你的html看起來像這樣：

<form id="document_valid_id"> 
    <ul> 
     <li class="dz-remove"> 
..... 
</form> 

如果你能顯示你的html也會有幫助。

Answer 2

考慮重構，讓您的代碼DRY：

function bindUploadErrorRemovalClickEvent(id) { 
    var elementWithId = $('#' + id); 
    elementWithId.find('.dz-remove').on('click', function() { 
     elementWithId.removeClass('doc-upload-error'); 
    }); 
} 

bindUploadErrorRemovalClickEvent('documents_valid_id'); 
// ... and so on 

Answer 3

檢查：

   $('.dz-remove').click(function(){ 
        var id = $(this).attr("id"); 
        $('#'+id).removeClass('doc-upload-error'); 
       });