缩短代码

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中找到它，然后执行您现在正在执行的操作。

如果您只想在这些ID中选择.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');
                });