コードを短くしてください

Question

こんにちは、このコードを短くする方法はありますか？ 1つのページに複数のフォームがあるので、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

はい。クラスがdoc-upload-errorクラスを削除したい要素にのみ適用される場合、共通クラス.dz-removeを使用して要素を選択することができます。

あなたは一度だけそれを行う必要があります。

$('.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は次のようになります場合、それは失敗するだろうという意味。

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 2

はあなたのコード DRYを維持するためにリファクタリングを考えてみましょう

Answer 3

チェックこの：

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