どのようにこのコードクリーナーを、繰り返しを書くことなく記述するのですか？

Question

$("#yl").click(function(){updateYear("sub")}); 
    $("#yr").click(function(){updateYear("add")}); 
    $("#ml").click(function(){updateMonth("sub")}); 
    $("#mr").click(function(){updateMonth("add")}); 
    $("#dl").click(function(){updateDay("sub")}); 
    $("#dr").click(function(){updateDay("add")}); 

このコードを繰り返しなくして賢く書く方法はありますか？

function update() { 
    const el = $(this); 
    const datePart = el.attr('data-date-part'); 
    const dateAction = el.attr('data-date-action'); 

    // do your logic to update the date based on what part and action 
} 

その後、あなたのクリックハンドラちょうど：

<button id='yr' data-type='update' data-date-part='year' data-date-action='add'> 

は、その後、あなたがこのようにオフを開始する更新機能を作成する：あなたは少しあなたの要素を変更した場合

Answer 1

することは、あなたはこのような何かを行うことができます必要があります：

$('button[data-type="update"]').click(update); 

jqueryの新しいバージョンもleあなたはただdata-属性の完全なスペルの代わりに.data()関数を使用するだけです。

Answer 2

コードは、何が起きているかが非常にはっきりと分かります。

これを別の方法でやりたいのであれば、おそらく関数を変更してHTML属性を調べるべきでしょう。それはすべてあなたが実際にそれらの機能でやっていることに依存します。

例えばユーザーがちょうど追加/サブボタンを押して、日付を入力する場合は、基本的には次のようになります。

$('.change-value').click(updateDatePart); 
 

 
function updateDatePart() { 
 
    // Read current date 
 
    var dateParts = $.map($(this).closest(".dateinput").find(".part-value"), function (span) { 
 
     return +$(span).text(); 
 
    }); 
 
    // Which part of the date needs incrementing/decrementing? 
 
    var part = $(this).closest('.part').index(); 
 
    // Apply change to that part 
 
    dateParts[part] += $(this).data("inc"); 
 
    // Create a date with this 
 
    var date = new Date(dateParts[0], dateParts[1]-1, dateParts[2]); 
 
    // Get the parts for the new date (which may have resolved some overflow) 
 
    dateParts = [date.getFullYear(), date.getMonth()+1, date.getDate()]; 
 
    // Output the result 
 
    $('.part-value').each(function (i, elem) { 
 
     $(elem).text(dateParts[i]); 
 
    }); 
 
}

.change-value { font-size: 50% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="dateinput"> 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">2017</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span>- 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">12</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span>- 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">24</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span> 
 
</span>