2016-08-03 138 views
0

嗨有其他方法可以縮短此代碼嗎?我在一個頁面中有多個表單,所以我需要通過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'); 
}); 

回答

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也會有幫助。

0

考慮重構,讓您的代碼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 
0

檢查:

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