Сделать код короче

Question

Привет, есть ли другой способ сделать этот код короче? У меня есть несколько форм на одной странице, поэтому мне нужно настроить таргетинг по идентификатору.

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

Или вы можете просто добавить пользовательский класс к любому элементу, который вы хотите удалить этот класс из самостоятельно и найти его в JQuery с $('.class-name'), а затем сделать то же самое, что вы делаете сейчас ,

Если вы хотите выбрать .dz-remove внутри только те идентификаторы, еще можно было заставить его работать так:

$('#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 класс не первый уровень ребенка вашей формы. это означает, что будет ошибкой, если ваш 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'); 
       });